Animate.css

Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Edit this on Github

Installation and usage

Installing

Install with npm:

$ npm install animate.css --save

with yarn:

$ yarn add animate.css

or add it directly to your webpage using a CDN:

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

Basic usage

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

That's it! You've got a CSS animated element. Super!

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

Using `@keyframes`

Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can use the provided animations keyframes directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

Example:

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

CSS Custom Properties (CSS Variables)

Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.

Example:

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globaly */
:root {
  --animate-duration: 800ms;
  --animation-delay: 0.9s;
}

Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.

Edit this on Github

Utility classes

Animate.css comes packed with a few utility classes to simplify its use.

Delay classes

You can add delays directly on the element's class attribute, just like this:

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css provides the following delays:

Class name	Default delay time
`animate__delay-2s`	`2s`
`animate__delay-3s`	`3s`
`animate__delay-4s`	`4s`
`animate__delay-5s`	`5s`

The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

<div class="animate__animated animate__bounce animate__faster">Example</div>

Class name	Default speed time
`animate__slow`	`2s`
`animate__slower`	`3s`
`animate__fast`	`800ms`
`animate__faster`	`500ms`

The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globaly or locally. This will affect both the animations and the utility classes. Example:

/* All animations will take twice as long to finish */
:root {
  --animation-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animation-duration: 0.5s;
}

Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration all the animations will respond to that change!

Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

Class Name	Default iteration count
`animate__repeat-1`	`1`
`animate__repeat-2`	`2`
`animate__repeat-3`	`3`

As with the repeat and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them setting the --animate-repeat property to a longer or a shorter value:

/* The element will repeat the animation 2x
   It's better to set this property only locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animation-repeat: 2;
}

Edit this on Github

Best practices

Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

Meaningful animations

You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.

It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.

Don't animate large elements

Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

Don't animate root elements

Animating the <html/> or <body/> tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

<body>
  <main class="animate__animated animate__fadeInLeft">
    <!-- Your code -->
  </main>
</body>

Infinite animations should be avoided

Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

Mind the initial and final state of your elements

All the Animate.css animations include a CSS property called animation-fill-mode which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.

Don't disable the `prefers-reduced-motion` media query

Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:

See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.

Gotchas

You can't animate inline elements

Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

Overflow

Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, this guide can help you understand it.

Intervals between repeats

Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.

Edit this on Github

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

You can detect when an animation ends:

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

or change its duration:

const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

You can also use a simple function to add the animations classes and remove them automatically:

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd() {
      node.classList.remove(`${prefix}animated`, animationName);
      node.removeEventListener('animationend', handleAnimationEnd);

      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd);
  });

And use it like this:

animateCSS('.my-element', 'animate__bounce');

// or
animateCSS('.my-element', 'animate__bounce').then((message) => {
  // Do something after the animation
});

If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.

Edit this on Github

Migration from v3.x and under

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is not possible.

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

If you're using a bundler, just update your import:

from:

import 'animate.min.css';

import 'animate.compat.css';

Notice that depending on your project's configuration, this might change a bit.

In case of using a CDN, just update the link on your HTML:

from:

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

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.

Edit this on Github

Custom Builds

Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.

First of all, you’ll need Node and all other dependencies:

$ cd path/to/animate.css/
$ npm install

Next, run npm start to compile your custom build. Three files will be generated:

animate.css: raw build, easy to read and without any optimization
animate.min.css: minified build ready for production
animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.

For example, if you'll only use some of the “attention seekers” animations, simply edit the ./source/animate.css file, delete every @import and the ones you want to use.

@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';

Now, just run npm start and your highly optimized build will be generated at the root of the project.

Changing the default prefix

It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

/* on Animate.css package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},

then:

$ npm start

Easy peasy!

Edit this on Github

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.

License

Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

Code of Conduct

This project and everyone participating in it are governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to callmeelton@gmail.com.

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.

Edit this on Github

Core team


Daniel Eden	Elton Mesquita	Waren Gonzaga
Animate.css creator	Maintainer	Core contributor

Edit this on Github

Animate.css

Just-add-water CSS animations

Attention seekers

Back entrances

Back exists

Bouncing entrances

Bouncing exits

Fading entrances

Fading exits

Flippers

Lightspeed

Rotating entrances

Rotating exits

Specials

Zooming entrances

Zooming exits

Sliding entrances

Sliding exits

Installation and usage

Installing

Basic usage

Using @keyframes

CSS Custom Properties (CSS Variables)

Utility classes

Delay classes

Slow, slower, fast, and Faster classes

Repeating classes

Best practices

Meaningful animations

Don't animate large elements

Don't animate root elements

Infinite animations should be avoided

Mind the initial and final state of your elements

Don't disable the prefers-reduced-motion media query

Gotchas

You can't animate inline elements

Overflow

Intervals between repeats

Usage with Javascript

Migration from v3.x and under

Custom Builds

Changing the default prefix

Accessibility

License

Code of Conduct

Contributing

Core team

Using `@keyframes`

Don't disable the `prefers-reduced-motion` media query