An alternate animate.css animation order

CSS

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

Your email address will not be published. Required fields are marked *