Animate.css is a wonderful CSS animation library.
http://daneden.github.io/animate.css/
On the website, animations are grouped by types – “Attention Seekers”, “Bouncing Entrances”, “Bouncing Exits”, etc.
What I present is a revised order with In’s and Out’s grouped next to each other. This gives a nice effect when cycling through all the animations.
Also, in doing this re-order I realized that SlideOutDown and SlideInUp do not exist.
‘bounce’,
‘flash’,
‘pulse’,
‘shake’,
‘swing’,
‘tada’,
‘wobble’,
‘hinge’,
‘rollIn’,
‘rollOut’,
‘bounceIn’,
‘bounceOut’,
‘bounceInDown’,
‘bounceOutDown’,
‘bounceInLeft’,
‘bounceOutLeft’,
‘bounceInRight’,
‘bounceOutRight’,
‘bounceInUp’,
‘bounceOutUp’,
‘fadeIn’,
‘fadeOut’,
‘fadeInDown’,
‘fadeOutDown’,
‘fadeInDownBig’,
‘fadeOutDownBig’,
‘fadeInLeft’,
‘fadeOutLeft’,
‘fadeInLeftBig’,
‘fadeOutLeftBig’,
‘fadeInRight’,
‘fadeOutRight’,
‘fadeInRightBig’,
‘fadeOutRightBig’,
‘fadeInUp’,
‘fadeOutUp’,
‘fadeInUpBig’,
‘fadeOutUpBig’,
‘flip’,
‘flipInX’,
‘flipOutX’,
‘flipInY’,
‘flipOutY’,
‘lightSpeedIn’,
‘lightSpeedOut’,
‘rotateIn’,
‘rotateOut’,
‘rotateInDownLeft’,
‘rotateOutDownLeft’,
‘rotateInDownRight’,
‘rotateOutDownRight’,
‘rotateInUpLeft’,
‘rotateOutUpLeft’,
‘rotateInUpRight’,
‘rotateOutUpRight’,
‘slideInDown’,
/*’slideOutDown’,
‘slideInUp’,*/ // DNE
‘slideOutUp’,
‘slideInLeft’,
‘slideOutLeft’,
‘slideInRight’,
‘slideOutRight’
Leave a Reply