Tutorial
How To Create Animations with Animate.css
Introduction
Animations can make or break the user experience of your application. You can manually create CSS animations using standard CSS3, but this solution requires considerable maintenance and configuration. Alternately, you can use Animate.css, which describes itself as “a library of ready-to-use, cross-browser animations.” These “just-add-water” animations provide a fast and efficient solution for all your animating needs.
In this tutorial, we will build a small todo-list application in Javascript and then animate various elements. To demonstrate how Animate.css can improve your workflow, we will first animate one element using standard CSS3 and then refactor our code to use Animate.css. We will then add several additional animations from Animate.css’s extensive library.
Prerequisites
To complete this tutorial, you will need:
- A code editor of your choice, such as
nanoor Visual Studio Code - A web browser
- A comfort with HTML fundamentals. You can view our tutorial series How To Build a Website with HTML for an introduction.
Step 1 — Creating the Base Application
Before we explore how to use the Animate.css library, let’s build a small todo-list application. This will give us some elements to style. We will then code a fadeIn animation using standard CSS3.
First, make a new folder for this project:
- mkdir animate-css-example
And then navigate inside:
- cd animate-css-example
We are going to create three files here: index.html, app.js, and style.css.
Use nano or your preferred code editor to create the first file, index.html:
- nano index.html
Add the following content to define a brief HTML document with links to our CSS and Javascript files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Animations</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add Todo</button>
</div>
<ul>
</ul>
<script src="app.js"></script>
</body>
</html>
Here we have added a title, CSS Animations, and linked to our CSS stylesheet (which we will make next). We then define some Javascript objects inside a <div> tag and link to our third file, app.js.
Save and close the file.
Now create and open style.css in your editor:
- nano style.css
Add the following content, which will define our fadeIn animation:
.fadeIn {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
We have defined the duration of the animation and used the @keyframes at-rule to configure one animation cycle.
Save and close the file.
Now let’s create our final file, app.js:
- nano app.js
Add the following content. This will define our addTodo function and embed our animation:
const addTodo = () => {
const ul = document.getElementsByTagName('ul')[0];
const input = document.getElementById('todoInput').value;
if (input.length > 0) {
const li = document.createElement('li');
li.classList.add('fadeIn');
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
document.getElementById('todoInput').value = '';
}
};
Our Todo app includes a text field and a button. When we enter text into the field and press the button, a new element is created and our text is appended to it. Note the highlighted line. Here we have added the fadeIn class to every newly created element.
Save and close the file.
Now open a browser and load index.html. A field and a button will appear. Write some text in the field and press Add Todo. Your new todo will fade in.
We have successfully applied a CSS animation to an element using standard CSS3. Now let’s refactor our code to use Animate.css and see how it can improve our productivity and readability. After that, we will explore a few more animations in the library.
Step 2 — Using the Animate.css Library
In this step we will refactor our code using Animate.css and then explore some additional animations.
First, we need to install Animate.css. We can do this using a CDN, or content delivery network.
Reopen index.html in your editor:
- nano index.html
Inside the <head> tag, remove the existing <link> tag to style.css and replace it with the highlighted code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Animations</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<div>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add Todo</button>
</div>
<ul>
</ul>
<script src="app.js"></script>
</body>
</html>
This <link> tag will use Animate.css’s official link to add their library directly to your page.
Note: You can also install the library using the node package manager (npm) or the yarn package manager.
To install the library using npm, use this command:
- npm install animate.css
Or, to install the library using yarn, use this command:
- yarn add animate.css
Save and close index.html
Let’s now refactor our Javascript to apply the fadeIn animation using Animate.css.
Every class in the Animate.css library uses an animate__ prefix. First you must add animate__animated. This instructs the element to use the Animate.css library. Then you add animate__specific_animation. You can browse the library’s official website for available options.
In our case, we will add animate__animated and then animate__fadeIn to our classList so that every new li, or list element, will fade in.
Make the following highlighted changes to your code. Your final file will look like this:
const addTodo = () => {
const ul = document.getElementsByTagName('ul')[0];
const input = document.getElementById('todoInput').value;
if (input.length > 0) {
const li = document.createElement('li');
const animations = [
'animate__animated',
'animate__fadeIn'
];
li.classList.add(...animations);
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
document.getElementById('todoInput').value = '';
}
};
We have created a constant that includes our Animate.css classes and then replaced fadeIn with the constant on the following line.
Save and close the file.
Now reload your browser. The fadeIn style will still appear, only now you are managing the effect with the Animate.css library.
Adding animations is fast with Animate.css and helps create readable code. To demonstrate this, let’s add a few animations to our <body> tag.
Open index.html in your editor:
- nano index.html
Imagine if we wanted every element inside the DOM to zoom in when a user loads the page, and we also wanted that animation to repeat three times. All we would need to do is add the animated__animate, the animated__zoomIn, and the animated__repeat classes to our code.
Add these three classes to the <body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Animations</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body class="animate__animated animate__zoomIn animate__repeat-3">
<div>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add Todo</button>
</div>
<ul>
</ul>
<script src="app.js"></script>
</body>
</html>
Save and close the file.
Now reload index.html in a browser and watch your new animation.
Without manually writing CSS or configuring any at-rules, we have successfully embedded CSS animations in HTML and Javascript using the Animate.css library.
Conclusion
Animate.css is a fast and efficient solution for adding CSS animations. Using it can speed up your workflow and create more readable code. From here you can explore the entire library of animations on Animate.css’s official webpage.
But remember, animations can quickly impede, not improve, the user experience. Animate.css includes useful sections on Best Practices and Gotchas so that your animations are the most successful. Animation can also prove harmful to those with certain medical issues. Animate.css supports the prefers-reduced-motion media query, so that clients can disable potentially harmful animations.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.
very helpful article … thanks
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: http://profi.spage.me/css/use-css-library-animate