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.
This framework is based on animate.css
Installation
Include the Animate.css CDN inside your head tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css" type="text/css">
Then add our animate.js CDN also, powered by
<script src="https://cdn.jsdelivr.net/gh/rohit-chouhan/animate.js/animate.js"></script>
Animation Styles & Types
Go to animate.css official website to find all the animation css class name, then use it with animate.js
How to apply
Here the syntex code to apply animation using animate.js
//Syntex
animate.apply({
selector:'<selector>',
style:'<animate_class>',
delay:<delay_time_in_sec>,
speed:'<speed of animation>',
repeat:<loop time of animation>
});
//Example
animate.apply({
selector:'#text',
style:'animate__rubberBand',
delay:1, // 1, 2, 3, 4
speed:'slow', // 'slow', 'slower', 'fast', 'faster'
repeat:1 // 1, 2, 3, 4, 'infinite'
});
Complete Example Code
Try Live Test https://jsfiddle.net/e9a1rm7x
<!DOCTYPE html>
<html>
<head>
<title>Animate.js</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/gh/rohit-chouhan/animate.js/animate.js"></script>
</head>
<body>
<center>
<h1 id="text">Animate Me</h1>
<br />
<button onclick="myfun()">Animate the Text</button>
</center>
</body>
<script>
function myfun() {
animate.apply({
selector: "#text",
style: "animate__rubberBand",
delay: 1,
speed: "fast",
repeat: 1,
});
}
</script>
</html>
Developed by Rohit Chouhan
34 Dec 14, 2022
210 Jan 4, 2023
4 Oct 14, 2022
585 Dec 31, 2022
14 Sep 9, 2022
19 Dec 31, 2022
3 Jun 21, 2022
38 Jun 4, 2022
12 Jul 22, 2022
7 Aug 5, 2022