This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used for animating elements with CSS animation. In CSS, we can do that by using the CSS animation property.
Animation classes :
- animate-spin: This class is used to add a linear spin animation to elements.
- animate-ping: This class is used to make an element scale and fade like a radar ping or ripple of water.
- animate-bounce: This class is used to make an element bounce up and down.
- animate-pulse: This class is used to make an element gently fade in and out.
Syntax :
<element class="animate-{animation_name}">...</element>Example 1: The following code implements classes animation-spin and animation-ping.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Animation</b>
<div class="m-auto ml-10 h-20 w-20
bg-green-300 animate-spin">
Spin
</div>
<div class="m-auto mt-0 h-20 w-20
bg-green-500 animate-ping">
Ping
</div>
</body>
</html>
|
Output:
Example 2: The following code implements classes animation-bounce and animation-pulse.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Animation</b>
<div class=" m-auto ml-10 h-20 w-20
bg-green-600 animate-pulse">
Pulse
</div>
<div class="m-auto mt-0 h-20 w-20
bg-green-700 animate-bounce">
Bounce
</div>
</body>
</html>
|
Output: