Motion Duration & Easing
动效时长与缓动
Aliases:动效时长动画时长缓动曲线动画快慢动效快慢弹跳顺不顺easingduration and easing
What is it
Motion duration is how long an animation runs: micro 100–150ms, standard 200–300ms, entrances 300–500ms. Ease out on entry; honour prefers-reduced-motion.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Hover, press and state changes on buttons, switches and cards
- Entrances and exits for popovers, drawers and panels
- One motion rhythm for the whole product instead of per-component timing
✕ When not to use
- When the user enables prefers-reduced-motion — fall back to a short fade or none
- Critical feedback slowed to the point of feeling laggy
- Decorative animations over 500ms looping and stealing attention
Variants
Micro feedback
微反馈
100–150ms — presses and hovers must feel instant
Standard
标准过渡
200–300ms — expand, switch, cross-fade
Emphasised
强调入场
300–500ms — page and full-screen overlay entrances
Implementation
transition-duration: 200mstransition-timing-function: cubic-bezier(0.2, 0, 0, 1)animation-duration: 300ms@media (prefers-reduced-motion: reduce)transition-property: transform, opacityStage durations as variables (--motion-fast: 120ms; --motion-base: 240ms; --motion-slow: 400ms) keyed to interaction type. Use ease-out or cubic-bezier(0.2, 0, 0, 1) for entrances, ease-in for exits, and make exits slightly faster than entrances. Animate transform and opacity only to avoid layout. Under prefers-reduced-motion: reduce, swap travel for an opacity fade capped at 150ms, or set transition: none.
Platform API
transition-durationtransition-timing-functionanimation-durationcubic-bezier()prefers-reduced-motionIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| Material Design | Duration & easing tokens Staged durations and standard easing tokens |
| Apple HIG | Motion Use motion to convey hierarchy and spatial relationships |
| CSS | transition-duration The property that controls transition length |
Related concepts
Honour the OS "reduce motion" preference by demoting large translations, zooms and parallax to a plain fade or no motion at all. Large motion can trigger nausea and vertigo in vestibular-sensitive users — a health risk, not a taste question. WCAG 2.3.3 requires non-essential animation to be disable-able.
AccessibilityUsed withOn hover, a card or button lifts slightly (translateY -2–6px) while its shadow deepens — as if raised by an invisible hand. The most common desktop affordance for "this is clickable": nearly free, instantly adds depth and life.
MotionUsed withWhen navigating, the outgoing page slides or fades away while the incoming one arrives — turning a hard cut into 200–400ms of continuous motion. Direction should mirror hierarchy: pushing left to go deeper, exiting right to go back, building a spatial mental model.
MotionUsed withWhen users press a clickable element it scales down slightly (typically 0.95–0.98) and springs back on release. A few tens of milliseconds that make a UI feel like physical buttons instead of flat web pages.
MotionUsed with