Tailwind CSS
/Advanced
Custom Animations
Definition
Pre-built CSS `@keyframes` animations provided by Tailwind, and the ability to define your own complex looping animations in the config file.
Explain Like I'm New
Transitions (`transition-all`) only go from Point A to Point B when triggered by a hover. Animations (`animate-spin`) loop continuously by themselves without needing a trigger.
Real World Example
Applying `animate-spin` to a loading circle SVG so it continuously rotates while an API request is fetching.
Common Use Cases
- •Loading spinners
- •Pulsing notification dots
- •Bouncing arrows
Interactive Example
Interview Questions
basic
- What Tailwind class makes an element continuously rotate 360 degrees?
intermediate
- How do you create a custom keyframe animation (e.g., `animate-wiggle`) that isn't included in default Tailwind?