Animate.css

This will be a micro post about a very useful CSS animation library. Animate.css is a CSS library which provides some cool, cross-browser animations for your page elements. It makes adding animations to your web pages very easy. I remember the times you had to write lines of good-old javascript code just to create the most simple animations 🙂 Of course, animate.css wouldn’t be possible without today’s modern browsers.

Adding animate.css to your websites and using it is very easy.

1-Download animate.css here (You can also see the live animations at the link)

2-Add it to your web page’s head section as below

3-Add the class “animated” to the element you want to animate

4-Finally, add one of the following classes to the same element

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
bounceIn

Check out this link for a complete list of animations.

So, an example of an H1 element animated using animate.css would look like below:

You can also add “infinite” class to your elements if you want your animations to repeat:

Hope this helps.
Good Luck,
Serdar

Leave a Reply

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