Why 'transition: all' Can Hurt Performance

The Cost of transition: all

Using transition: all is the most common CSS transition pattern — and also the most wasteful. It tells the browser to watch every animatable property for changes, even properties you never intend to animate.

What Happens Under the Hood

When you write:

.element {
  transition: all 0.3s ease;
}

The browser must:

1. Check every animatable CSS property on every frame
2. Track previous values for comparison
3. Start interpolating any property that changes — including ones you did not expect

Unintended Side Effects

.element {
  color: #333;
  background-color: #fff;
  padding: 16px;
  transition: all 0.3s ease;
}

/* Later, a theme class or media query changes padding */
@media (max-width: 768px) {
  .element { padding: 8px; }
}

With transition: all, resizing the window causes the padding to animate — a jarring, unintended effect. If you had specified only transition: background-color 0.3s ease, padding would change instantly.

Better Approach

Always list only the properties you intend to animate:

/* Bad */
.button {
  transition: all 0.3s ease;
}

/* Good */
.button {
  transition: background-color 0.2s ease,
              transform 0.2s ease-out,
              box-shadow 0.2s ease;
}

When all Is Acceptable

• Prototyping: When you are experimenting and do not care about performance yet
• Simple elements: If the element has very few properties (e.g., a solid-color div with only background-color and opacity)
• Short-lived elements: Tooltips or notifications that exist briefly