How to install Animate.css

Created

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.

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.

Installation

You can download the latest version of Animate.css from the GitHub releases or use a Animate.css CDN.

Cloning a repository

You can clone a repository from GitHub.com to your local computer.
Cloning with HTTPS URLs
git clone https://github.com/animate-css/animate.css.git
Cloning with SSH URLs
git clone [email protected]:animate-css/animate.css.git
Cloning with GitHub CLI
gh repo clone animate-css/animate.css

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i animate.css
npm install animate.css
yarn add animate.css
Downloading and installing packages globally
npm i -g animate.css
yarn global add animate.css
Install Specific Version of a Package
npm install [email protected]
Bower
bower install animate.css

Example

Code 1: - 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>

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

Code 2: - Usage with Javascript

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

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

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(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });