Getting Started with Animate.css

Paul Halliday

Animations. They can absolutely make or break the user experience of your application. When implementing CSS animations on your own, you’ll likely run into the same issues over and over again.

Animate.css seeks to solve this issue by giving you access to common animations such as fadeIn, fadeOut, bounce, flash, tada, and countless others!

Let’s see this in action with a simple JavaScript project:

CSS Animations

Make a new folder with two files - index.html and app.js:

$ mkdir animate-css-example

$ cd animate-css-example

$ touch index.html
$ touch app.js

Prior to using Animate.css, let’s look at how we can create fadeIn and fadeOut animations using CSS3. Inside of index.html, I have the following:

<!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>

Our addTodo function inside of app.js looks 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');

    li.classList.add('fadeIn');
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

The key aspect of this is simply the addition of the fadeIn class whenever we add a new Todo. This is a standard CSS3 animation and can be referenced as such:

.fadeIn {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Todo animation

Enter Animate.css

Now that we’ve seen how we might do this ourselves without Animate.css, let’s add Animate.css to our project to handle the heavy lifting for us!

Depending on your build system, you can install Animate.css in a variety of ways:

# via npm:

$ npm install animate.css 

# via yarn:

$ yarn add animate.css

Or we can go simpler and load this via CDN and that’s what we’ll be doing inside of our project:

<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>

Adding Animations

To use a particular animation (such as tada, fadeIn, bounceInDown, etc) we first need to add the class animated to the element.

For the sake of our example, let’s add it to our body tag so that each starting element inside of the DOM is animated on start up:

<body class="animated">
 <!-- Omitted -->
</body>

Nothing happens at this point. That’s because animated simply tells Animate.css that we’d like to animate this element in the future and this is responsible for set-up.

Let’s add the zoomIn class to the body:

<body class="animated zoomIn">
 <!-- Omitted -->
</body>

Body element with zoomIn animation

Woosh! Each time we refresh the page, the content now zooms in to the page. What if we wanted this to repeat over and over again? Say… infinitely?

Let’s add the infinite class to the mix:

<body class="animated zoomIn infinite">
 <!-- Omitted -->
</body>

This now repeats without us having to refresh the page. Tada! Let’s remove the fadeIn animation from our style.css file, and use Animate.css to apply the fadeIn instead.

Challenge: Based on what you know now - how might we go about doing this?

Well, it’s as simple as adding animated fadeIn to the classList upon creation of a new li:

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 = [
      'animated',
      'fadeIn'
    ];
    
    li.classList.add(...animations);
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

Summary

There we have it! We no longer have to maintain common CSS animations and can rely on a consistent, easy to use out of the box solution with Animate.css.

To take full advantage of this inside of your own applications, take a look at the full list of animation classes here: Animation class list.

You can find the source code for this article here: Source code

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#