How to Create Animation Effects using pure CSS
Creating animation nowadays is becoming a lot easier than ever. There are many readymade library available to create animation effect.
In this article, we will discuss about one of these library. Animate.css is simple one css file library which provides cross-browser animations for any web application. The animate.css useful in home pages, sliders for attention-guiding hints. Animate.css.
Installation
Install animate.css using npm command.
npm install animate.css --save
Or simply add the CDN file directly in <head> tag of HTML code.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
Usage
After you add the library, just add animate__animated class along with along with any animation name with prefix animate__ to elements which you want to add animation.
Example:
<h1 class="heading animate__animated animate__bounce">An animated element</h1>
You can change animation duration by adding animate__delay-3s class where 3s is 3 seconds time of animation.
You can also add the effect to specific class using @keyframes directly to any class. You don't need to add animate__ prefix while adding it to animation. You also need to add animation-duration with it.
.heading {
animation: bounce;
animation-duration: 2s;
}
You can use Javascript code to add sugar with Animate.css library. This will create effect whenever you want any event occurs.
const elem = document.querySelector('.header');
elem.classList.add('animate__animated', 'animate__bounce');
Full Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animate.css</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div class="text-center mt-5">
<h1 class="header animate__animated">I am dancing!</h1>
<button class="btn btn-primary">Animate</button>
</div>
<script type="text/javascript">
document.querySelector('.btn-primary').addEventListener('click', function() {
const elem = document.querySelector('.header');
elem.classList.add('animate__bounce');
setTimeout(function() {
const elem = document.querySelector('.header');
elem.classList.remove('animate__bounce');
}, 1000);
});
</script>
</body>
</html>
This way you can add animation to make your web application more attractive. You can get all animation effect name at here.
I hope you liked this article.
