Keyframe animations in CSS - Performance & Optimization

Performance: Keyframe animations

MEDIUM IMPACT

Keyframe animations affect the browser's paint and composite stages, impacting smoothness and visual stability during animations.

Animating an element smoothly without causing layout shifts or heavy repaints

CSS

@keyframes moveAndScale {
  0% { transform: translateX(0) scaleX(1); }
  100% { transform: translateX(200px) scaleX(3); }
}
.element {
  animation: moveAndScale 2s infinite;
  will-change: transform;
  position: absolute;
}

Animating 'transform' uses the compositor thread, avoiding layout and paint, resulting in smooth animations.

📈 Performance Gainsingle composite per frame, no reflows or repaints, smoother animation with less CPU

Animating an element smoothly without causing layout shifts or heavy repaints

CSS

@keyframes moveAndResize {
  0% { left: 0; width: 100px; }
  100% { left: 200px; width: 300px; }
}
.element {
  position: absolute;
  animation: moveAndResize 2s infinite;
}

Animating 'left' and 'width' triggers layout recalculations and repaints on every frame, causing jank and high CPU usage.

📉 Performance Costtriggers multiple reflows and repaints per frame, increasing CPU load and causing jank

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Animating 'left' and 'width'	High (style changes affect layout)	Multiple per frame	High (full paint)	[X] Bad
Animating 'transform' and 'opacity'	Low (no layout changes)	None	Low (composite only)	[OK] Good

Rendering Pipeline

Keyframe animations update styles each frame. Animating layout properties triggers Style Calculation, Layout, and Paint stages repeatedly. Animating transform or opacity bypasses Layout and Paint, going directly to Composite, which is faster.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when animating layout properties.

Core Web Vital Affected

CLS

Keyframe animations affect the browser's paint and composite stages, impacting smoothness and visual stability during animations.

Optimization Tips

1Animate only transform and opacity properties for best performance.

2Avoid animating layout-affecting properties like width, height, margin, or position.

3Use 'will-change' to hint the browser about upcoming animations for smoother rendering.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth performance?

A width

B left

C transform

D margin

DevTools: Performance

How to check: Record a performance profile while the animation runs. Look for Layout and Paint events during animation frames.

What to look for: High number of Layout and Paint events indicates poor animation performance; mostly Composite events indicate good performance.