Using Built-in Animation Classes
Tailwind provides ready-made animation utilities like animate-bounce, animate-pulse, animate-spin, and animate-ping. These are quick to use and require no setup.
Example:
<div class=”animate-bounce bg-blue-500 text-white p-4 w-32 text-center”>
Bounce
</div>
Adding Transition Effects
Use transition utilities to smoothly animate changes like hover effects, colors, or scaling.
Example:
<button class=”bg-green-500 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-600″>
Hover Me
</button>
Transform & Scale Animations
You can apply transformations like scale, rotate, and translate with Tailwind to create interactive animations.
Example:
<div class=”transform transition duration-300 hover:scale-110 bg-purple-400 p-4″>
Scale Up
</div>
Custom Animations in Tailwind Config
For advanced animations, you can define custom keyframes and animations inside tailwind.config.js.
Example:
module.exports = {
theme: {
extend: {
keyframes: {
fadeIn: {
‘0%’: { opacity: 0 },
‘100%’: { opacity: 1 },
},
},
animation: {
fade: ‘fadeIn 1s ease-in-out’,
},
},
},
}
<div class=”animate-fade bg-gray-300 p-4″>
Fade In Effect
</div>
Combining Animations for UI Effects
You can combine multiple utilities like transition, transform, and hover to create smooth and modern UI animations.
Example:
<button class=”bg-indigo-500 text-white px-6 py-2 rounded transform transition duration-300 hover:scale-105 hover:bg-indigo-600″>
Interactive Button
</button>
