In this article, I will show you how to use animation effects on your website. This method is very simple and easy. Also no need to download anything. If this article is helpful for you? so, please don't forget to follow and share.
So let's talk about how we do this. First of all, complete your website designing and obviously coding. make it responsive also. after all that, time to add animation effects. To do that simply insert this code inside your HTML <head> tag:
<link rel="stylesheet" href="animate.min.css">
CDN Available
You can also access these effects with the CDN link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
Then go to Animate.css This site allows you to get premade classes of animation for your site. and it's absolutely free. to use it just click on the drop-down and choose what effect you want.
After choosing effect click on animate it button to see a preview. After that go to the GitHub page by tapping View on GitHub. this page has propper information about how we use these effects in javascript or how many delays we want. means how much speed we want for our effects.
there are lots of things you need to know about animation on the web. Then scroll down so you'll see animation class names. Just find your animation name as a class. Copy and pest it as a class in your HTML elements like text, image, icon, video, background, etc.
Example for try:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
<body>
<div class="animated bounce delay-2s">this is animated text</div>
</body>
</html>
Owner of Animate.css Mr.Daniel Eden.
Thank you, Mr.Daniel Eden to make these wonderful premade classes use for animation.