How to install Animate.css

Created Apr 4, 2021 at 12:40

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.

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

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

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]

yarn add [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});
  });