Foundations / Motion

Motion

Durations and curves so transitions feel fast and consistent. Variables in the Motion collection: duration-* in milliseconds and easing-* as CSS text.

Version 1.4 · Oct 20, 2026

Durations

FLOAT variables in milliseconds (Motion collection). The smaller the element or the change, the shorter the duration.

Name (token)
Value
When to use it
duration-instant
0 ms
Changes without animation: focus, keyboard selection, reduced motion.
duration-fast
180 ms
Hover and pressed on buttons, links, nav items and tabs; Tooltip appearing.
duration-base
240 ms
Toggle, Checkbox, Tabs indicator, Alert entering, Badge.
duration-slow
240 ms
Modal and overlay entering; Card going to Hover.
duration-slower
480 ms
Page transitions or large panels. Use sparingly.
duration-instant · 0 ms
duration-fast · 180 ms
duration-base · 240 ms
duration-slow · 240 ms
duration-slower · 480 ms

Curves (easing)

STRING variables with the curve in CSS format, ready to copy.

Name (token)
Value
When to use it
easing-standard
cubic-bezier(0.2, 0.8, 0.2, 1)
State changes of something already on screen.
easing-enter
cubic-bezier(0.2, 0.8, 0.2, 1)
Elements that come in: Modal, Tooltip, Alert. Slows down on arrival.
easing-exit
cubic-bezier(0.4, 0, 0.2, 1)
Elements that leave. Speeds up on leaving; lasts 20–30% less than the entrance.
easing-emphasized
cubic-bezier(0.2, 0.8, 0.2, 1)
Highlight moments with a smooth, decisive ease-out (for example, confirming a payment). Not for everyday UI.
easing-standard
easing-enter
easing-exit
easing-emphasized

Use by component

Recommended duration and curve. Animate only opacity, color and transform; avoid animating width, height or large shadows.

Component
Duration · curve
What is animated
Button · Link · Nav item · Tab
fast · standard
Background, text and border color on Hover/Pressed. Focus appears instantly.
Tabs and Nav indicator
base · standard
Movement (transform) of the active line.
Toggle · Checkbox · Radio
base · standard
Knob position and fill.
Input · Select · Textarea
fast · standard
Border color on Hover and Focus.
Tooltip
fast · enter / exit
Opacity and 4 px of movement; 300 ms delay before showing.
Alert
base · enter
Opacity and 8 px of vertical movement.
Modal + overlay
slow · enter; base · exit
Overlay in opacity; Modal in opacity and scale from 0.96 to 1.
Card
slow · standard
Shadow (shadow-sm → shadow-md) and border on Hover.

Reduced motion

If the person turns on “reduce motion” (prefers-reduced-motion: reduce): remove movement, scaling and bounces; keep only opacity or color changes with duration-fast, or duration-instant. Nothing should flash more than 3 times per second. Do not rely on animation to communicate a change: the final state must be clear without it.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0ms; transition-duration: 0ms; }
  .modal, .tooltip { transition: opacity var(--duration-fast) var(--easing-standard); }
}

What to do and what to avoid

fast 180 · base 240
✓
Do this

Short durations in everyday UI: hover in 180 ms, state changes in 240 ms.

800 ms on a hover
✕
Avoid this

Animations over 500 ms on buttons or menus: the interface feels slow.

enter 240 · exit 180
✓
Do this

Entrance with easing-enter and a shorter exit with easing-exit.

scale 0.8 → 1.2
✕
Avoid this

Bounces or large movements with reduced motion on.