Transition shortcuts

The six transition-* shortcuts choose a transition property with a 150ms ease timing. transition-all, transition-colors, transition-opacity, transition-shadow, and transition-transform turn off the transition under reduced motion. transition-none sets the property to none.

Class	Property focus
`transition-none`	None
`transition-all`	All changing properties
`transition-colors`	Colors
`transition-opacity`	Opacity
`transition-shadow`	Shadow
`transition-transform`	Transform

html

<button class="control-base transition-colors focus-ring" type="button">
  Save changes
</button>

icon-crossfade is a separate fragment for an icon layer. It prevents shrinking and pointer capture; opacity, filter, and scale transition for 300ms only when motion is allowed. The application supplies icon size, stacking, and the state-specific visible/hidden poses:

html

<button aria-pressed="false" type="button">
  <span aria-hidden="true" class="d:inline-grid">
    <span class="icon-crossfade grid-area:[1/1] opacity:100">○</span>
    <span class="icon-crossfade grid-area:[1/1] opacity:0">✓</span>
  </span>
  Complete
</button>

Update aria-pressed and the two opacity classes together when the action changes state. If adding scale or blur poses, gate those with @motion-safe as well so the reduced-motion state remains immediate. icon-crossfade does not read aria-pressed, provide a toggle handler, or replace a component’s own swap API. Keep decorative icon layers hidden from assistive technology.

Storybook specimen · Next: Typography