/motion-design

Easing & Duration Tokens

Standardized motion values for consistent, intentional UI animation.

Easing Curves

Ease-Out Family (Enter/Exit, User-Triggered)

Use for elements appearing or disappearing. Fast initial acceleration creates responsiveness.

Default choice: --ease-out-quart for most enter/exit animations.

Ease-In-Out Family (Reposition/Morph/Layout)

Use for elements already on screen that move or change shape. Natural acceleration and deceleration.

Default choice: --ease-in-out-cubic for most layout/morph animations.

Ease-In Family (Rarely Used)

Generally avoid for UI. Only use for:

• Elements exiting permanently (not returning)
• Creating anticipation before a larger motion

Built-in CSS Ease

Reserved for subtle hover states: color, opacity, background transitions.

transition: color 150ms ease;

Linear

For time-based visualizations where progress should feel constant:

• Progress bars
• Marquee/ticker
• Hold-to-delete indicators
• Loading spinners

transition: transform 1000ms linear;

Duration Tokens

Duration Guidelines

Product UI: 120-240ms for most interactions. Rarely exceed 300ms.

When to use longer durations (300ms+):

• Element is physically large
• Easing curve is steep early (snappy start, long tail)
• It's illustrative/marketing content

Tooltip special case:

• First tooltip: add delay (prevent accidental activation)
• Subsequent tooltips while one is open: no delay, minimal animation

CSS Custom Properties

:root {
  /* Durations */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 300ms;
  --dur-5: 500ms;

  /* Ease-out */
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);

  /* Ease-in-out */
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}

Quick Reference

Performance

Properties to Animate

Stick to transform and opacity—these run on the compositor and don't trigger layout.

/* Good - compositor only */
transition: transform 200ms, opacity 200ms;

/* Avoid - triggers layout */
transition: width 200ms, height 200ms, top 200ms, left 200ms;

For width/height changes, use transform: scale() instead. For position changes, use transform: translate().

will-change

Use sparingly. It creates compositor layers which consume memory.

/* Only when actively animating */
.element.is-animating {
  will-change: transform;
}

Blur

backdrop-filter: blur() is expensive. Keep values under ~20px.

/* Fine */
backdrop-filter: blur(12px);

/* Expensive */
backdrop-filter: blur(40px);