0
0
CSSmarkup~8 mins

Keyframe animations in CSS - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Animating 'left' and 'width'High (style changes affect layout)Multiple per frameHigh (full paint)[X] Bad
Animating 'transform' and 'opacity'Low (no layout changes)NoneLow (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
Test your performance knowledge
Which CSS property is best to animate for smooth performance?
Awidth
Bleft
Ctransform
Dmargin
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.