CSS Performance
5 min read
Animate only transform and opacity for smooth 60fps GPU-accelerated performance. Avoid animating width, height, or background as they trigger expensive layout recalculations. Use will-change: transform sparingly.
CSS Performance Tips
- Use CSS custom properties to avoid repetition
- Prefer CSS animations over JavaScript for smooth 60fps
- Use
will-change: transform for elements that animate (sparingly) - Avoid universal selectors (
*) in deep trees - Use
contain: layout paint for isolated components - Minify CSS in production
- Critical CSS inline, rest deferred