If you need the old docs - v3.x.x and under - you can find it here.
Install with npm:
npm install animate.css --saveInstall with yarn:
yarn add animate.cssYou can find the Animate.css documentation on the website.
When using Animate.css with scroll-triggered JavaScript libraries (such as wow.js, ScrollReveal, or AOS), animations may appear to restart on every page load or when an element re-enters the viewport. This is expected CSS animation behavior: whenever an animation class is removed from an element and then re-added, the animation plays again from the start.
To run an animation only once, remove the animation classes after the animation ends using the animationend event:
const element = document.querySelector('.animate__animated.animate__bounceIn');
element.addEventListener('animationend', () => {
element.classList.remove('animate__animated', 'animate__bounceIn');
}, { once: true });If you are using wow.js specifically, you can prevent it from re-triggering animations on elements already visible in the viewport by initialising it with the resetAnimation option set to false (if supported by your version), or by removing the animation class on animationend as shown above.
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 majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
 |
 |
 |
|---|---|---|
| Daniel Eden | Elton Mesquita | Waren Gonzaga |
| Animate.css Creator | Maintainer | Core Contributor |
Animate.css is licensed under the Hippocratic License.
This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to animate@eltonmesquita.com.
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a pen. That last one is important.