Add Animation to Your HTML5 Pages | animate.js

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

Easily apply amazing animations to your HTML5 elements using JavaScript. This framework is based on animate.css.

How to make use of it:

1. Load the mandatory animate.css and animate.min.js within the web 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 goal component. Refer to the Animate.css Offical website for the total animation listing.

<h1 id="example">Animate.js</h1>
animate.apply({
  selector: '#example',
  style: "animate__swing",
});

3. Set the animation delay: to 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 to depend on the animation: 1, 2, 3, 4, or ‘infinite’.

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

Manage Animate.css Powered Animations, animate.js Plugin/Github, trigger css animation with javascript


See Demo And Download

Official Website(rohit-chouhan): Click Here

This superior jQuery/javascript plugin is developed by rohit-chouhan. For extra Advanced Usage, please go to the official website.

Share