Animate.css: Cool animations without another jQuery plugin

Animate.css is an awesome and free collection of CSS animations that you can apply to your projects with almost no effort. I thoroughly enjoy this CSS based animation aid. I was looking for an interesting plugin for a client that wanted “a bouncing login form that drops from the top of the page”, simple to find right?

There’s nothing groundbreaking or special about the way Animate.css is built, if you know how to use CSS, then you will have no trouble getting it to work. It’s simply a bunch of pre-defined keyframe animations rolled into a few easy to implement CSS classes. To use Animate.css on your website, download the project on GITHUB, drop the stylesheet into your document’s head area, 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. If these were all extremely simple transitions, this utility might not be worth your time. However, these are complex, carefully built animations that are fully customizable. If you’re looking to use keyframes on any level, Animate.css could save you a lot of time.

The best part about this project is that its simply a stylesheet, no extra jQuery plugins to load, no nonsense. You can, however trigger the animations with jQuery and the addClass() function. I did this to the admin login image on my own blog site. Super awesome! Kudos to you, Dan Eden for creating such a cool and useful project!

Yes sir, I WILL buy you a coffee.

Check out the animate.css demo page and play around with the different animations. Its quite fun!