Motion

Appear and dismiss

Surfaces entering the screen, such as modals, use the appear timing.
Leaving runs faster and eases in, so the exit stays quieter than the entrance.
Use these custom properties in app-side animations to match the framework.
State changes on elements already on screen, such as hover and focus colors, keep using the $timing-fast, $timing-medium and $timing-slow Sass tokens.

.my-panel {
  transition: opacity var(--dismiss-duration) var(--dismiss-timing-function);
}
.my-panel.is-open {
  transition-duration: var(--appear-duration);
  transition-timing-function: var(--appear-timing-function);
}

Reduced motion

When the user prefers reduced motion, both durations become 0s, so anything built on them stops animating without extra code.