Nearby lessons
60 of 61š¬ Tailwind CSS - Animation
š Overview
Animation utilities apply pre-built CSS animations to elements. Tailwind includes several built-in animations and you can add custom ones via configuration.
š Animation Utilities
Built-in animations:
animate-none- No animationanimate-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 durationdelay-{ms}- Animation delayease-{type}- Timing functionrepeat-{n}/repeat-infinite- Iteration count
šØ Custom Animations
Add custom animations in tailwind.config.js:
- Define keyframes in
theme.extend.keyframes - Register animation in
theme.extend.animation - Use with
animate-{name}class
š§ Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!Tailwind CSS - Transform