Tutorial

How To Create Animations with Animate.css

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:

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:

./animate-css-example/index.html
<!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:

./animate-css-example/style.css
.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:

./animate-css-example/app.js
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.

Todo animation

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:

./animate-css-example/index.html
<!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:

./animate-css-example/app.js
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:

./animate-css-example/index.html
<!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.

Body element with zoomIn 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.

Creative Commons License