动效时长与缓动
Motion Duration & Easing
别名:动效时长动画时长缓动曲线动画快慢动效快慢弹跳顺不顺easingduration and easing
这是什么
动效时长是动画从开始到结束的时间，按交互类型分档：微反馈 100–150ms、标准过渡 200–300ms、强调入场 300–500ms。缓动决定加速减速的节奏，入场用 ease-out、退场用 ease-in。始终尊重 prefers-reduced-motion，把位移降级为淡入。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 按钮、开关、卡片等元素的悬停、按下、状态切换
- 弹层、抽屉、面板的入场与退场
- 需要统一全站动效节奏、避免每个组件各写一个时长
✕ 不适用场景
- 用户开启 prefers-reduced-motion（应降级为短淡入或无动画）
- 关键操作等待反馈，动画拖慢到让人觉得卡顿
- 超过 500ms 的装饰性动画反复播放、抢占注意力
常见形式
微反馈
Micro feedback
100–150ms，点按、悬停要立刻可感知
标准过渡
Standard
200–300ms，展开、切换、淡入淡出
强调入场
Emphasised
300–500ms，页面与全屏浮层入场
实现要点
transition-duration: 200mstransition-timing-function: cubic-bezier(0.2, 0, 0, 1)animation-duration: 300ms@media (prefers-reduced-motion: reduce)transition-property: transform, opacity时长按交互类型分档并用变量统一（--motion-fast: 120ms; --motion-base: 240ms; --motion-slow: 400ms）。入场用 ease-out 或 cubic-bezier(0.2, 0, 0, 1)，退场用 ease-in，并让退场比入场略快。只动 transform 与 opacity，避免触发 layout。媒体查询 prefers-reduced-motion: reduce 下把位移改成 opacity 淡入并压到 150ms 内，或直接 transition: none。
平台 API
transition-durationtransition-timing-functionanimation-durationcubic-bezier()prefers-reduced-motion代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| Material Design | Duration & easing tokens 分档时长与标准缓动令牌 |
| Apple HIG | Motion 用动效表达层级与空间关系 |
| CSS | transition-duration 直接控制过渡时长的属性 |
相关概念
尊重系统「减弱动态效果」偏好，把大幅位移、缩放、视差动画降级为淡入甚至直接呈现。前庭敏感的用户会被大幅动效诱发眩晕恶心，这不是审美偏好而是健康风险；WCAG 2.3.3 要求非必要动画可被关闭。
无障碍搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用页面之间切换时，旧页面滑出或淡出、新页面滑入或淡入，让路由跳转 从"硬切"变成一段 200～400ms 的连续运动。方向应与信息层级一致： 进入下级页面向左推入，返回时向右退出，帮助用户建立空间心智模型。
动效搭配使用用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效搭配使用