RSS

Animate.css – Cool Cross Browser Animations Using CSS

17 Sep

Animate.css adds cool, cross browser animations using pure css. This css file helps you to easily add attention seekers, flippers, fading entrances, fading exits, sliders, bouncing entrances, bouncing exits, rotating entrances, rotating exits, lightspeed and other special effects.

Animate.css

Animate.css

To use animate.css in your website, simply drop the stylesheet into your document’s <head>, and add the class animated to an element, along with any of the animation names. That’s it! You’ve got a CSS animated element.

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

1
$(‘#yourElement’).addClass(‘animated bounceOutLeft’);

 

The plugin is licensed under MIT license. Here is the set of css classes defined which you can readily paste it for bringing animations.

Attention seekers:

flash bounce shake tada swing wobble pulse

Flippers (currently Webkit, Firefox, & IE10 only):

flip flipInX flipOutX flipInY flipOutY

Fading entrances:

fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig

Fading exits:

fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig

Bouncing entrances:

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight

Bouncing exits:

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight

Rotating entrances:

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

Rotating exits:

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

Lightspeed:

lightSpeedIn lightSpeedOut

Specials:

hinge rollIn rollOut

Advertisements
 
Leave a comment

Posted by on September 17, 2013 in CSS

 

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: