DEV Community

FrozonFreak
FrozonFreak

Posted on Originally published at thewebhig.hashnode.dev

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

#css #a11y #webdev #frontend

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)