Animate items when scrolled into view, hovered, or clicked using Animate.css.
Animated allows for animating items on a page. There are many different options to choose from with some starting hidden and others ending hidden.
Animations can be triggered when an item on the page has the mouse hovered over it, when the user scrolls the page so that the item is visible, or when something is clicked with the mouse.
Animation Types:
- Attention Seekers: bounce, flash, pulse, shake, swing, tada, wiggle, wobble
- Bouncing Entrances: bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceInUpExpand
- Bouncing Exits: bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
- Expand: expandDown, expandLeft, expandRight, expandUp
- Fading Entrances: fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig
- Fading Exits: fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig
- Flippers: flip, flipInDownBackward, flipInDownForward, flipInLeftBackward, flipInLeftForward, flipInRightBackward, flipInRightForward, flipInUpBackward, flipInUpForward, flipInX, flipInY, flipOutX, flipOutY
- Lightspeed: lightSpeedIn, lightSpeedOut
- Repeating: beating, blinking, floating, pulsating, throbbing, tossing
- Rotating Entrances: rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
- Rotating Exits: rotateDown, rotateLeft, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rotateRight, rotateUp
- Slide: slideDown, slideDownReturn, slideLeft, slideLeftReturn, slideRight, slideRightReturn, slideUp, slideUpReturn
- Specials: bombLeftOut, bombRightOut, foolishIn, foolishOut, hinge, holeOut, magic, pileDrive, rollIn, rollOut, springUp
- Static: openDownLeft, openDownLeftOut, openDownLeftReturn, openDownRight, openDownRightOut, openDownRightReturn, openUpLeft, openUpLeftOut, openUpLeftReturn, openUpRight, openUpRightOut, openUpRightReturn
- Swinging: swingInDownBackward, swingInDownForward, swingInLeftBackward, swingInLeftForward, swingInRightBackward, swingInRightForward, swingInUpBackward, swingInUpForward
- Tin: tinDownIn, tinDownOut, tinLeftIn, tinLeftOut, tinRightIn, tinRightOut, tinUpIn, tinUpOut
- Zoom: puffIn, puffOut, swap, swashIn, swashOut, twisterInDown, twisterInUp, vanishIn, vanishOut, zoomInBounce, zoomInGrow, zoomInShrink
Trigger:
- scroll – triggered when the user scrolls their browser window
- hover – triggered when the user’s mouse hovers over the item
- click – triggered when the user clicks on an item
[st_animated type="fadeInLeft" trigger="scroll"]Animated element goes here[/st_animated]
[st_animated type="bounce" trigger="hover"]Animated element goes here[/st_animated]
[st_animated type="fadeOut" trigger="click"]Animated element goes here[/st_animated]