Animation Utilities in TailwindCSS
? Animation Utilities in Tailwind CSS
Tailwind CSS includes built-in animation utilities that let you apply CSS animations quickly and easily, using predefined animation names, durations, easing, and iteration counts.
Core Animation Utilities
1. animate-{name}
Applies a predefined keyframe animation. Some common built-in animations:
| Class | Description |
|---|---|
animate-none | Disables animation |
animate-spin | Rotates element 360 degrees forever |
animate-ping | Scales and fades out repeatedly (pulse effect) |
animate-pulse | Smooth fade in and out repeatedly |
animate-bounce | Bounces element up and down repeatedly |
2. Animation Duration, Timing, Delay, and Iteration
You can customize animations with these utilities:
| Utility Class | CSS Property | Examples |
|---|---|---|
duration-{time} | animation-duration | duration-500, duration-1000 |
ease-{type} | animation-timing-function | ease-linear, ease-in-out |
delay-{time} | animation-delay | delay-200, delay-500 |
repeat-{count} | animation-iteration-count | repeat-1 (once), repeat-infinite |
Examples
1. Spin an Icon
<div class="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>Creates a spinning circle loader.
2. Pulse Button
<button class="animate-pulse bg-green-500 text-white px-4 py-2 rounded"> Pulsing Button</button>Button smoothly fades in and out continuously.
3. Bounce Effect
<div class="animate-bounce p-4 bg-yellow-300 rounded"> Bouncing box</div>Element bounces vertically in a loop.
4. Customizing Animation Duration and Delay
<div class="animate-ping duration-1000 delay-500"> Ping with 1s duration and 0.5s delay</div>Adding Custom Animations
You can define your own animations in tailwind.config.js:
module.exports = { theme: { extend: { animation: { 'wiggle': 'wiggle 1s ease-in-out infinite', }, keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' }, } } } }}Use:
<div class="animate-wiggle"> Custom wiggle animation</div>If you want, I can help you create more complex animations or integrate them with interaction states!
