CSS Animation Performance

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

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

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.

CSS Animation Performance

The Rendering Pipeline#

Prefer Transform and Opacity#

Transform vs Position#

Will-Change Property#

Hardware Acceleration#

Contain Property#

Reduce Paint Areas#

Animation Timing#

Reduce Complexity#

Stagger Animations#

Reduce Motion Preference#

Debugging Performance#

Animation Checklist#

Best Practices#

Conclusion#

Share this article

Related articles

CSS View Transitions API

CSS content-visibility Property Guide

CSS View Transitions Guide