Smooth animations require understanding browser rendering. Here's how to achieve 60fps.
The Rendering Pipeline
JavaScript → Style → Layout → Paint → Composite
Layout triggers: width, height, margin, padding, top, left
Paint triggers: color, background, box-shadow, border-radius
Composite only: transform, opacity
Prefer Transform and Opacity
Loading code block...
Transform vs Position
Loading code block...
Will-Change Property
Loading code block...
Hardware Acceleration
Loading code block...
Contain Property
Loading code block...
Reduce Paint Areas
Loading code block...
Animation Timing
Loading code block...
Reduce Complexity
Loading code block...
Stagger Animations
Loading code block...
Loading code block...
Reduce Motion Preference
Loading code block...
Debugging Performance
Loading code block...
Animation Checklist
Loading code block...
Best Practices
Do:
✓ Animate transform and opacity
✓ Use will-change sparingly
✓ Keep animations under 300ms
✓ Respect reduced motion preference
Avoid:
✗ Animating layout properties
✗ Large box-shadows during animation
✗ will-change on many elements
✗ Long animation durations
Debug:
✓ Use Chrome Performance tab
✓ Enable paint flashing
✓ Check for layer promotion
✓ Monitor frame rate
Conclusion
Performant animations use transform and opacity, which skip layout and paint. Use will-change sparingly, contain elements to limit recalculation, and always test with DevTools. Respect reduced motion preferences for accessibility.