Manage Animate.css Powered Animations Using Animate.js Library

Preview:

Description:

animate.js is a tiny JavaScript library that provides a convenient way to apply Animate.css powered CSS animations to DOM elements without writing any CSS.

How to use it:

1. Load the necessary animate.css and animate.min.js in the page.

<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />
<script src="/path/to/animate.min.js"></script>

2. Apply a CSS animation to the target element. Refer to the Animate.css Offical website for the full animation list.

<h1 id="example">Animate.js</h1>

animate.apply({
  selector: '#example',
  style: "animate__swing",
});

3. Set the animation-delay: 1, 2, 3, or 4.

animate.apply({
  selector: '#example',
  style: "animate__swing",
  delay: 2,
});

4. Set the animation speed: ‘slow’, ‘slower’, ‘fast’, or ‘faster’.

animate.apply({
  selector: '#example',
  style: "animate__swing",
  speed: 'slow',
});

5. Set the iteration count of the animation: 1, 2, 3, 4, or ‘infinite’.

animate.apply({
  selector: '#example',
  style: "animate__swing",
  repeat: 'infinite',
});