Motion

Fast for feedback, normal for small state changes. Specify properties explicitly — never transition: all. Respect prefers-reduced-motion.

Durations

Use the documented tokens so interactions feel consistent across marketing and product.

transition: background-color var(--duration-fast) var(--ease-standard),
            transform var(--duration-normal) var(--ease-standard);

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Hover the previews above. Reduced-motion preferences should zero decorative travel; loading indicators may slow rather than vanish. No content should depend on an entrance animation to become visible.

Usage

Fast (0.12s) — hover color, focus rings, icon state.
Normal (0.2s) — button translate + hard shadow, card border lift, menu open.
Avoid — large parallax, autoplaying decorative loops, transition: all.

Token reference

Token	Value
`--duration-fast`	`0.12s`
`--duration-normal`	`0.2s`
`--ease-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`