Loading lessons...
Transition & Transform Cheatsheet
Transitions & Transforms Cheatsheet
Transitions
| Goal | Classes |
|---|---|
| Enable transition | transition |
| Colors only | transition-colors |
| Transform only | transition-transform |
| Duration | duration-200, duration-300, duration-500 |
| Timing | ease-in, ease-out, ease-in-out |
| Delay | delay-100 |
| All | transition-all |
Transforms
| Goal | Classes |
|---|---|
| Move right | translate-x-4 |
| Move up half | -translate-y-1/2 |
| Rotate | rotate-45, -rotate-90 |
| Scale up | scale-105, scale-110 |
| Scale down | scale-75, scale-0 |
| Skew | skew-x-6 |
| Origin | origin-top-left, origin-center |
Animation
| Goal | Classes |
|---|---|
| Spinner | animate-spin |
| Pulse | animate-pulse |
| Bounce | animate-bounce |
| Ripple | animate-ping |
| Custom | animate-wiggle (define in @theme) |
Common patterns
- Button hover:
transition-colors duration-200 hover:bg-sky-700 - Card lift:
transition hover:-translate-y-1 hover:shadow-xl - Icon spin on hover:
transition-transform hover:rotate-180 - Modal fade:
transition-opacity opacity-0 group-hover:opacity-100 - Hover zoom:
transition-transform duration-300 hover:scale-105
TL;DR
transition+duration-+ease-control motion.translate/rotate/scale/skewmodify elements.origin-*sets the pivot point.- Combine transform + transition for hover effects.