How to Create Amazing Animation using Animate.css
Wanna make amazing animation for your website and make give it fancy look to attract users. its very easy let me show you how within just a few steps using CSS library called animate.css.
it’s become more difficult to make animations using the only CSS for newbie designers and also it’s little more time-consuming process.so using this process you’ll create amazing Animation within less time and less coding.
so let’s get started.
Getting started
First of all, you have to add animate.css library to load CSS library to your HTML.
<!-- Animate Css Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">After load animation library let’see how we can create simple and advance animation using Javascript.
Simple Animation
You can create a simple animation using just by adding some class to elements.
To add animation effects on elements you simply have to add .animated class with the animation style type class you want to apply and you’re good to go.look at the below example:
Example:
<h1 class="animated infinite bounce">Animation Demo</h1>
There is lot’s of other animation option available, click here to check.
You’ll be able to see the above animation on page reload.
Advance Animation using Javascript
By default, Animate.css will apply animation to an element only once when page loads.
Usually, we have to make this type of animation on click or any other events, so to take control over the animation, we’ll need to use some Javascript and Jquery for it. so we have to include Jquery CDN for it.
Step-1 :
Add the jquery CDN to your page
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Step-2 :
Then add markup for button and element which you want to be animated on click event as below:
<h1 class="clickDemo">Animation Demo</h1>
<button type="button" id="addAnimation" class="btn btn-secondary">Click to animate</button>Step-3:
To trigger click event and add a class on click event we have to use Jquery, After ending HTML tag add some Javascript code including with script tag as follow:
<script>
$('#addAnimation').click(function() {
$('.clickDemo').addClass('animated infinite zoomOutLeft');
})
</script>and that's it, Now you are done. Now your animation is ready you can check it on your browser or f you find any issue checkout complete source code given below
Complete Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animate.css</title>
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Animate Css Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<div class="container">
<div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted mt-1">Simple Animation</h6>
<h1 class="animated infinite bounce">Animation Demo</h1>
</div>
</div>
<div class="card" style="width: 40rem;margin-top: 20vh;margin-left: 40vh;">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted mt-1">Animation with Using Javascript</h6>
<h1 class="clickDemo">Animation Demo</h1>
<button type="button" id="addAnimation" class="btn btn-secondary">Click to animate</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('#addAnimation').click(function() {
$('.clickDemo').addClass('animated infinite zoomOutLeft');
})
</script>
</body>
</html>Conclusion:
So these is some basic uses of Animate.css which can become handy during development, you can create more advanced animation using this library.
Hope you like this tutorial, If yes then Don’t forget to share this tutorial with your friends on facebook and twitter.
Happy Coding…
