Transition Utilities

Performance-optimised transition classes that target specific CSS properties instead of all. All transition classes respect prefers-reduced-motion automatically.

Available Classes

Class	Transition properties
transition-colors	background-color, border-color, color
transition-shadow	box-shadow
transition-transform	transform
transition-opacity	opacity
transition-all	all (use sparingly)
transition-none	Disables transitions

All classes use --duration-fast (150ms) and --ease-out by default.

Color & Shadow

<div class="flex gap-2">
  <button class="transition-colors border rounded-md p-2" style="cursor: pointer" onmouseover="this.style.background='var(--color-primary)';this.style.color='var(--color-on-primary)';this.style.borderColor='var(--color-primary)'" onmouseout="this.style.background='';this.style.color='';this.style.borderColor=''">Hover: transition-colors</button>
  <button class="transition-shadow border rounded-md p-2" style="cursor: pointer" onmouseover="this.style.boxShadow='var(--shadow-lg)'" onmouseout="this.style.boxShadow=''">Hover: transition-shadow</button>
</div>

Opacity & Transform

<div class="flex gap-2">
  <div class="transition-opacity rounded-md p-3" style="background: var(--color-primary); color: var(--color-on-primary); cursor: pointer" onmouseover="this.style.opacity='0.5'" onmouseout="this.style.opacity='1'">Hover: transition-opacity</div>
  <div class="transition-transform rounded-md p-3" style="background: var(--color-success); color: #fff; cursor: pointer" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform=''">Hover: transition-transform</div>
</div>

Hover: transition-opacity

Hover: transition-transform

Prefer specific transitions

transition-all animates every property change, which can cause layout jank and unexpected visual artefacts. Use a specific class (transition-colors, transition-opacity, etc.) whenever possible.

---

Responsive Variants

All classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<!-- No transition on mobile, color transition from md up -->
<button class="transition-none md:transition-colors">Responsive</button>

---

Accessibility

Transitions are automatically disabled for users who have enabled Reduce Motion in their OS settings:

@media (prefers-reduced-motion: reduce) {
  .transition-colors,
  .transition-shadow,
  .transition-transform,
  .transition-opacity,
  .transition-all {
    transition-duration: 0.01ms !important;
  }
}

This sets transition-duration to near-zero rather than removing the transition entirely, so transitionend events still fire and JavaScript logic relying on them continues to work.

---

Duration & Timing Tokens

Override the defaults with CSS custom properties or the SCSS functions:

Token	Value
--duration-fast	150ms
--duration-base	300ms
--duration-slow	500ms

Token	Value
--ease	cubic-bezier(0.4, 0, 0.2, 1)
--ease-in	cubic-bezier(0.4, 0, 1, 1)
--ease-out	cubic-bezier(0, 0, 0.2, 1)
--ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)
--linear	linear

<!-- Slower transition via inline override -->
<div class="transition-opacity" style="transition-duration: var(--duration-slow)">
  Slow fade
</div>