How to use CSS Animations with Tailwind CSS ?
Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind’s animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs.
Table of Content
- Tailwind CSS Animation Utility Classes
- CSS Animations with Tailwind CSS and JavaScript
- Tailwind CSS and Internal CSS Styling
Tailwind CSS Animation Utility Classes
In this approach, the ‘animate-bounce’, ‘animate-spin’, ‘animate-pulse’, and ‘animate-ping’ classes trigger corresponding animations, such as bouncing, spinning, pulsing, and pinging, respectively. Each animated element is styled with background color and text color classes for visual appeal.
Example: The example below uses pre-built utility classes from Tailwind CSS to easily apply animations to elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Animation Utility Classes</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div class="animate-bounce bg-blue-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Bouncing Animation
</div>
<div class="animate-spin bg-green-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Spinning Animation
</div>
<div class="animate-pulse bg-purple-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Pulsing Animation
</div>
<div class="animate-ping bg-yellow-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Ping Animation
</div>
<div class="animate-bounce bg-red-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Bouncing Animation
</div>
</div>
</body>
</html>
Output:
CSS Animations with Tailwind CSS and JavaScript
In this approach, the ‘clickMe’ element, styled with Tailwind CSS classes, toggles a spinning animation when clicked. This animation is defined using the @keyframes rule in the embedded CSS, rotating the element 360 degrees. Additionally, hovering over the second element triggers a bouncing animation.
Example: The example below shows CSS Animations with Tailwind CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Animations with Tailwind CSS and JavaScript</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style>
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div id="clickMe"
class="bg-blue-500 text-white px-4
py-2 rounded-md shadow-md
mb-4 cursor-pointer
hover:animate-pulse"
onclick="toggleSpin()">
Click to Spin
</div>
<div class="bg-green-500 text-white px-4
py-2 rounded-md shadow-md mb-4
cursor-pointer hover:animate-bounce">
Hover Animation
</div>
</div>
<script>
function toggleSpin() {
let clickMe = document.getElementById('clickMe');
clickMe.classList.toggle('animate-spin');
clickMe.classList.contains('animate-spin') ?
clickMe.style.animation = "spin 2s linear infinite"
: clickMe.style.animation = "";
}
</script>
</body>
</html>
Output:
Tailwind CSS and Internal CSS Styling
In this approach, The elements utilize Tailwind CSS classes for styling, and the animations are applied using the defined internal CSS animations. We’ve added two new animations: slide-in-bottom and spin-scale. Each animation is defined using internal CSS. The first element slides in from the bottom with fading opacity, defined by the slideInBottom keyframes animation. The second element combines scaling and spinning effects
Example: The example below shows CSS Animations with Tailwind CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS and Internal CSS Styling</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
<style>
.slide-in-bottom {
animation: slideInBottom 1s forwards;
}
@keyframes slideInBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.spin-scale {
animation: spinScale 1s ease-in-out infinite alternate;
}
@keyframes spinScale {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.2) rotate(360deg);
}
}
</style>
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div class="slide-in-bottom bg-blue-500
text-white px-4 py-2 rounded-md
shadow-md mb-4 cursor-pointer
hover:bg-blue-600">
Slide In from Bottom</div>
<div class="spin-scale bg-green-500 text-white
px-4 py-2 rounded-md shadow-md mb-4
cursor-pointer hover:bg-green-600">
Spin and Scale</div>
</div>
</body>
</html>
Output:
Contact Us