Animate.css

Just-add-water CSS animations

See animations
Close list

Attention seekers

Attention seekers

Attention seekers

Attention seekers

Attention seekers

Another thing from Daniel Eden and friends

Documentation

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.

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/4.0.0/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.

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>

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>

Best practices

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>

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>

Usage with Javascript

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>

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>

Migration from v3.x and under

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>

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>

Custom Builds

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>

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>

Accessibility

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>

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>

Core team

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

License and Contributing

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

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.

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 [email protected].