Animation Libraries Demo

Animate.css - Entrance/Exit Animations

Click boxes to replay animations. Uses class-based triggers.

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

Hover over buttons to see effects. Perfect for CTAs and navigation.

Grow Shrink Pulse Push Pop Float Sink Bob Rotate

Background Transitions

Sweep to right Sweep to bottom Radial out Shutter in horizontal

Border & Underline Effects

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

Unique and quirky animations for special moments.

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

Scroll down to see elements animate into view.

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

Hover to trigger shakes. Great for error states or attention.

Hover me! shake (default)

Hover me! shake-hard

Hover me! shake-slow

Hover me! shake-horizontal

Hover me! shake-vertical

Hover me! shake-rotate

Hover me! shake-crazy

Always shaking! shake-little (constant)

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

Random Animations

Refresh the page to see different random animations.

Random Entrance

random('animate', 'entrances')

Random Hover 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        

Available Animations Reference

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