0
0
CSSmarkup~8 mins

Transition property in CSS - Performance & Optimization

Choose your learning style9 modes available
Performance: Transition property
MEDIUM IMPACT
This affects the smoothness and speed of visual changes on the page, impacting user interaction responsiveness and visual stability.
Animating a button hover effect smoothly
CSS
button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: red;
}
Transition only the background-color, which is a paint-only property, avoiding layout recalculations.
📈 Performance GainSingle paint per frame, smooth animation, and better input responsiveness.
Animating a button hover effect smoothly
CSS
button {
  transition: all 0.3s ease;
}
button:hover {
  width: 200px;
  background-color: red;
}
Using 'all' triggers transitions on every property change, including layout-affecting ones like width, causing multiple reflows and repaints.
📉 Performance CostTriggers multiple reflows and repaints per frame, causing jank and slower interaction response.
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Transition on 'all' including widthMultiple style recalculationsMultiple reflows per frameHigh paint cost[X] Bad
Transition on 'background-color' onlyMinimal style recalculationsNo reflowsLow paint cost[OK] Good
Transition on 'transform' propertyMinimal style recalculationsNo reflowsGPU accelerated paint[OK] Good
Transition on 'height' propertyTriggers layout recalculationReflow per frameHigh paint cost[X] Bad
Rendering Pipeline
When a transition starts, the browser calculates style changes, then updates layout if needed, repaints affected areas, and composites layers for display.
Style Calculation
Layout
Paint
Composite
⚠️ BottleneckLayout and Paint stages are most expensive if transitioning layout-affecting properties.
Core Web Vital Affected
INP
This affects the smoothness and speed of visual changes on the page, impacting user interaction responsiveness and visual stability.
Optimization Tips
1Avoid transitioning layout-affecting properties like width, height, margin.
2Use specific properties in transition instead of 'all' to limit performance cost.
3Prefer properties like opacity and transform for GPU-accelerated smooth animations.
Performance Quiz - 3 Questions
Test your performance knowledge
Which CSS property is best to transition for smooth animations?
Aopacity
Bwidth
Cheight
Dmargin
DevTools: Performance
How to check: Record a performance profile while triggering the transition. Look for Layout and Paint events during the animation.
What to look for: High number of Layout or Paint events indicates expensive transitions; smooth animations show mostly Composite events.