Using Animate.css and jQuery for easy Web Animation

Using Animate.css and jQuery for easy Web Animation

Animate.css  is a fantastic little library of Animations that takes the messy keyframing out of web animations. While they can definitely be abused, short and subtle animations are a great way of adding feedback and interaction to your website or web app.

While you can get away with just using the CSS classes, you will most likely want to apply these animations on command with JavaScript. This short tutorial will show you how to get setup with animate.css, use it properly with jQuery and listen for the animationend event to take the classes off.

Hope you enjoy, please leave any questions or comments below!

https://youtu.be/CBQGl6zokMs

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Beginner JavaScript

Beginner JavaScript

A fun, exercise heavy approach to learning Modern JavaScript from scratch. This is a course for absolute beginners or anyone looking to brush up on their fundamentals. Start here if you are new to JS or programming in general!

BeginnerJavaScript.com
I post videos on and code on

Wes Bos © 1999 — 2024

Terms × Privacy Policy