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:
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