This article was originally published at https://www.blog.duomly.com/how-to-use-animate-css-tutorial-with-examples/
A few years ago, I was working on a mobile app project where the user interface was pretty advanced, loaded with lots of movement and gradients. It was just like each of those modern mobile apps, which would like to provide the best visual experience to users.
It took me lots of time to create all the animations in CSS and make them smooth and good looking according to designer instructions. Then, I started to look for some solution that will make this task more comfortable and will give me the required result without any surprises.
That’s exactly how I found Animate.css library, and from the beginning, I decided it’s what I need. I personally think that many front-end developers really love this library, as it allows us to make UI really stunning.
Today I’d like to give you an easy tutorial on how to use Animate.css library step by step to help you jump into this awesome resource.
P.S. If you are the one who prefers to watch instead of reading, join us on our youtube channel where we post all our tutorials as a video.
Let’s get started!
1. What is the animation.css library?
As a creator of the library wrote on the website, it’s „just-add-water CSS animations”. It’s very simple to use a library, which can be downloaded as a one CSS file and added to your project to use one of many predefined animations by adding a class to an element.
You can customize selected animations by setting the delay and speed of the effect. It’s possible to use animations with pure HTML and CSS projects, but you can also implement Javascript as well.
2. Installation
There are two ways to start using the Animate.css library. If you are using npm or yarn, it’s enough to install it using one of the following commands:
$ npm install animate.css --save
or
$ yarn add animate.css
But if you are not using any of them, just download a minified .css file or get a CDN and load it in the head section of your main file like in the code below:
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Or with CDN:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
Besides the very easy installation, Animate.css contains just one file, so it doesn’t affect the loading time really much, and the performance of the page is still safe.
3. How to add any animation to an element on your page?
Now, I’d like to explain to you step by step how you can add any of the available animations to an element on your page.
Let’s imagine you have an h1 element on your page, and you want to add a bounce animation. In every element, it’s necessary to add animated class, and if you wish it to be infinite, then, of course, add infinite class.
After that, you have to specify the type of animation you selected as another class, in our case, bounce. Let’s take a look at the example:
And voila! It works really nicely. You can also set some more parameters, and you can style it manually or add other classes according to the tables below:
Table - Delay Time
Table - Speed Time
Or you can style it manually like other animations in CSS, check the example below:
h1 {
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: 5;
}
Now, when it’s more clear how to use it, let’s learn about different usage of animations given by the Animation.CSS library on three different examples.
4. Loading animations
Each layout needs a loader to attract users while waiting for data. Animate.css can help us with creating a pretty animation for any layout. Let’s try it!
I decided to use flip animation for three nested elements. Two most inner elements have a delay, so it means that the animations on those elements start 1 or 2 seconds later. Each element has a speed set to slower, which, according to the table, means 3s.
5. Navigation
Almost every page needs navigation, some of them have a typical horizontal one, but nowadays, it’s very common to use a toggle menu. It’s modern, responsive, user friendly, and for sure, it will help clients to remember your website.
Here’s an example of using Animate.css effects in the toggle menu with pure Javascript.
6. Form
The last project I’d like to show you in this article using Animate.css library is a form with simple validation.
I’d like to add a shaking effect for the input element while the field is required but not filled in.
Here’s the implementation:
Conclusion
As you could see in the few examples above, animations can bring lots of life and beauty to the UI.
It also makes the user experience much better because what can be better than a shaking field showing that this is the one that misses the value?
It’s possible to create many beautiful and advanced animations in CSS from scratch, you can check a short cheat sheet for animations in one of our previous articles, but it’s much easier and comfortable to use a dedicated library like Animate.css. Especially that it is so small that it won’t hurt the performance of the website.
Let us know in the comments if you tried to use Animate.css or any other library to create beautiful animations on your layouts. If yes, share your opinion. If not, maybe that’s the time to try?
Thank you for reading,
Anna from Duomly
Top comments (12)
Nice!.. By the way, v4.0 has been released and they are now an organization.
GIthub: github.com/animate-css
Docs: animate.style/
+1 was about to say, used animate.css a while ago and was surprised to see the changes now
Thanks! :)
Buena información :D
Gracias! Yo soy feliz :)
Ya me suscribí a tu canal de YouTube 😄 and I will learn english too 😁
Gracias por subscription! Video es la buena metoda. Yo necesito aprende mas bueno espanol :D :D
Thanks for you write a beautiful article, it's very very helpful.
Thank you! :)
One more point.
Clicking or hovering the mouse should trigger the animation. Use the class add operator. After animation, remove this class. How to find out the animation is over. I use the el.addEventListener("animationend", () => { //del class// }); function for this. I found information about this here:
profi.spage.me/css/use-css-library...
I LOVE this library. I've used it for 90% of my projects so far!
Yeah! Its awesome!
Feel free to share some of your ideas for animations :)