Transition property in CSS - Performance & Optimization

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

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Transition on 'all' including width	Multiple style recalculations	Multiple reflows per frame	High paint cost	[X] Bad
Transition on 'background-color' only	Minimal style recalculations	No reflows	Low paint cost	[OK] Good
Transition on 'transform' property	Minimal style recalculations	No reflows	GPU accelerated paint	[OK] Good
Transition on 'height' property	Triggers layout recalculation	Reflow per frame	High 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

Which CSS property is best to transition for smooth animations?

A opacity

B width

C height

D margin

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.