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
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>Go to animate.css official website to find all the animation css class name, then use it with animate.js
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'
});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