Micro-animations provide tactile feedback and emotional polish, guiding users through complex flows without compromising performance.
1. Animation Performance Golden Rules
| CSS Property | Triggered Browser Stage | Performance Rating |
|---|---|---|
transform: translate3d(), scale() | Composite Layer ONLY (GPU Accelerated) | 60–120 FPS Smooth |
opacity: 0 → 1 | Composite Layer ONLY | 60–120 FPS Smooth |
top, left, width, height, margin | Layout (Reflow) + Paint + Composite | Avoid during continuous animations (Causes Jank) |