Animation Effects in css
In this blog, we will learn how to use animation effects on websites like animate text, animate buttons, etc. we mostly see on website animation effects of button and text animation on the image slider. Let’s see the following steps to use animation:
Step1: Go to the following link :
https://animate.style/
Step2: use the following CDN link in your <head> tag:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
Step3: use the class of animation which animation effect you want to use like:
<h1 class="animate__animated animate__bounce">An animated element</h1>
Complete Code:
<!DOCTYPE html>
<html>
<head>
<title>Animation Effect</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body>
<h1 class="animate__animated animate__bounce">Bounce Effect</h1>
<h1 class="animate__animated animate__swing">Swing Effect</h1>
<h1 class="animate__animated animate__wobble">Wobble Effect</h1>
<h1 class="animate__animated animate__heartBeat">Heart Beat Effect</h1>
</body>
</html>
There are numbers of animation effects you can copy the class name of animation whatever effect you want to use on the website.
