🎬 Tailwind CSS - Animation

Animation utilities apply pre-built CSS animations to elements. Tailwind includes several built-in animations and you can add custom ones via configuration.

Built-in animations:

• animate-none - No animation
• animate-spin - Continuous rotation (loading spinners)
• animate-ping - Scale and fade out (notification badges)
• animate-pulse - Fade in and out (skeleton loaders)
• animate-bounce - Bounce up and down

Control animation with:

• duration-{ms} - Animation duration
• delay-{ms} - Animation delay
• ease-{type} - Timing function
• repeat-{n} / repeat-infinite - Iteration count

Add custom animations in tailwind.config.js:

• Define keyframes in theme.extend.keyframes
• Register animation in theme.extend.animation
• Use with animate-{name} class