Web HIG tip #6: Application CSS must not use transition: all

[frozonfreak]

transition: all looks convenient until a new property starts animating and the UI jumps in ways you never meant.

Web HIG tip #6 (Quick #85, HIG-MOT-001): Application CSS must not use transition: all — enumerate animated properties explicitly.

Why it matters

A single all transition is a blank cheque:

• Adding width, height, top, or left later can suddenly animate layout and make the UI feel sluggish or jumpy
• Reviewers can't tell which properties were meant to move, so regressions hide in plain sight
• The browser may do more work than you intend when properties change that you never planned to animate
• Vendor stylesheets are a different story; this rule is about CSS you write for your product

The rule of thumb

Ask: if someone added a new property to this rule tomorrow, would it start animating by accident?

If yes, replace all with the properties you actually want.

/* Don't: this transitions every property the browser can animate, including layout ones */
.button {
  transition: all 0.3s ease;
}

/* Do: name only the properties you mean to animate */
.button {
  transition: background-color 150ms ease, transform 150ms ease;
}

Prefer transform and opacity when they can do the job. Layout transitions aren't forbidden; you just have to list them on purpose.

Do this instead

• Enumerate each animated property in transition (or use transition-property)
• Keep micro-feedback short and for one purpose (Quick #86)
• Prefer shared duration tokens over magic numbers like 0.3s (Quick #87)
• Leave third-party and vendor CSS alone unless you own that stylesheet

Quick check for your app

Search your application styles for transition: all and transition-property: all. Each hit should become an explicit list, or be removed if no animation is intended. Skip node_modules and other vendor CSS.

---

The Web HIG is a behavioral contract for how the web should behave, not a component library. Design systems define how it looks. The Web HIG defines how it behaves.

• Docs: https://frozonfreak.github.io/webhig/
• Quick Reference: https://github.com/frozonfreak/webhig/blob/main/HIG-QUICK.md
• Repo: https://github.com/frozonfreak/webhig