Predstavitev knjižnic animacij

Animate.css - Entrance/Exit Animations

Kliknite polja za ponovno predvajanje animacij. Uporablja sprožilce, ki temeljijo na razredu.

Fade In

fadeIn

Bounce

bounceIn

Slide

slideInLeft

Zoom

zoomIn (slow)

Tada!

tada (delay 1s)

Pulse

pulse (infinite)

            AnimationHelper::animate('fadeIn')
            AnimationHelper::animate('bounceIn', ['duration' => 'slow'])
            AnimationHelper::animate('tada', ['delay' => '1s', 'repeat' => 2])        

Hover.css - Hover Effects

Premaknite miškin kazalec nad gumbe, da vidite učinke. Popoln za CTA-je in navigacijo.

Grow Shrink Pulse Push Pop Float Sink Bob Rotate

Prehodi v ozadju

Sweep to right Sweep to bottom Radial out Shutter in horizontal

Učinki obrobe in podčrtaja

Underline from left Underline from center Overline reveal Ripple out

            AnimationHelper::hover('grow')
            AnimationHelper::hover('sweep-to-right')
            AnimationHelper::hover('icon-forward', ['icon' => 'forward'])        

Magic.css - Special Effects

Edinstvene in nenavadne animacije za posebne trenutke.

Puff In

puffIn

Magic

magic

Twister

twisterInUp

Space

spaceInUp

Boing

boingInUp

Tin

tinRightIn

            AnimationHelper::magic('puffIn')
            AnimationHelper::magic('twisterInUp')
            AnimationHelper::magic('spaceInUp')        

AOS - Animate on Scroll

Pomaknite se navzdol, da vidite elemente, animirane v pogledu.

Fade Up

Fade Right

Zoom In

Flip Up

Slide Up

Zoom Out

            Html::tag('div', $content, array_merge(
                ['class' => 'card'],
                AnimationHelper::aos('fade-up', ['delay' => 200, 'once' => true])
            ))        

CSShake - Shake Effects

Premaknite miškin kazalec, da sprožite tresenje. Odlično za stanja napak ali pozornost.

Lebdi me! shake (default)

Lebdi me! shake-hard

Lebdi me! shake-slow

Lebdi me! shake-horizontal

Lebdi me! shake-vertical

Lebdi me! shake-rotate

Lebdi me! shake-crazy

Vedno se trese! shake-little (constant)

            AnimationHelper::shake('horizontal')
            AnimationHelper::shake('crazy')
            AnimationHelper::shake('little', ['constant' => true])        

Naključne animacije

Osvežite stran, da vidite različne naključne animacije.

Random Entrance

random('animate', 'entrances')

Naključno premikanje random('hover', '2d')

Random Magic

random('magic')

            AnimationHelper::random('animate', 'entrances')  // Random entrance animation
            AnimationHelper::random('hover')                  // Random from all hover effects
            AnimationHelper::random('shake', 'directional')   // Random directional shake        

Reference o razpoložljivih animacijah

Animate.css

attention entrances exits

Hover.css

2d background border shadow speech icon curls

Magic.css

magic bling static staticOut perspective rotate slide math tin bomb boing space

AOS

fade flip slide zoom

CSShake

basic directional special