When I started using key-frame animation in CSS I had to write many lines for one simple animation, and to be honest I’m as lazy as one can get, I didn’t want to write CSS for simple animations and then I came across Animate.css. It’s a CSS library, which has many animation classes written in it and believe me these classes helped me a lot with CSS animations.

So, animate.css is really simple to use. All you need to do is add the CSS files to your HTML file.

Then after that add animate classes to your element class attribute it’s that simple. Like this,

animate.css has 90+ types of animation classes, play with them in https://daneden.github.io/animate.css/

Here are some of my favorite animations

An example of where this might be used practically is form validations, you can easily show the user the exact field which is incomplete, here is an example I made on Codepen.

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.

Closing Thoughts

If this post gets enough traction, I will share more tips about css which I use on a daily basis to make websites more interactive and beautiful.

If you liked this post, please do hit the 👏 below to support.

Animate.css — Intro was originally published in Error Logs from Last Night on Medium, where people are continuing the conversation by highlighting and responding to this story.