Elements:Animations
Add beautiful animation effects to elements as they come into view.
Basics
Simply add an data-animate="ANIMATION-EFFECT" attribute to any element.
fade in Effects
You can use all "in" effects that are included in the amazing animate.css plugin to animate in elements.
Using the infinite attribute can support other animation effects like pulse & flash.
If you want an element to disappear from view you can use the "out" effects.
bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
Options
Animation Delays and Durations
You can delay or alter the duration of an animation effect by including data-animate-delay="TIME-IN-SECONDS" and/or data-animate-duration="TIME-IN-SECONDS" attributes.
This can be useful for staggering animation effects, the example below delays .
View code example1
2
3
4
5
1
2
3
4
5
Infinite
You can add data-animate-infinite="1" to make an animation effect run infinitely.
Breaking news!
Breaking news!
Examples
In Effects
Out Effects
NOTE: these will disappear from view once the effect has run.