动画曲线与时间
感自然的缓动曲线与时长 — 及保持一致的令牌。
视觉设计进阶
为什么
线性缓动感机械；ease-in-out 端感慢。真物体非对称减速。命名缓动令牌（standard、emphasized、exit）使每动画感同产品。
何时使用
任何 3+ 动画转换的应用。即使几个 hover 状态也受益于共享曲线 — 每组件临时 cubic-bezier 感脱节。
如何做
1. standard — 入元素 ease-out（下拉、工具提示）：起快、稳 — 感响应",
2. emphasized — 状态变化 ease-in-out（展开/折叠）：慢、引注意",
3. exit — 离元素 ease-in（模态关）：起慢、离快 — 感被解雇",
4. 时长 — --dur-fast: 150ms（hover）、--dur-standard: 250ms（切换）、--dur-slow: 400ms（页）",
5. spring — 拖/掷（framer-motion spring）；CSS 不能真 spring，cubic-bezier 近似",
6. 距离缩放 — 更远距离 = 更长时长；200px 滑 250ms、20px 滑 150ms",
7. 减弱动效 — 这些全经 prefers-reduced-motion 守卫塌缩到 0.01ms
示例
:root {
/* 缓动曲线 — 按意图命名，非 bezier 数 */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 入：ease-out 向 */
--ease-emphasized: cubic-bezier(0.45, 0, 0.55, 1); /* 状态变化：ease-in-out */
--ease-exit: cubic-bezier(0.4, 0, 1, 1); /* 离：ease-in 向 */
/* 时长 — 按规模命名 */
--dur-fast: 150ms; /* hover、focus */
--dur-standard: 250ms; /* 切换、下拉 */
--dur-slow: 400ms; /* 页转换、模态 */
}
/* 用法 — 意图可读 */
.dropdown { transition: opacity var(--dur-standard) var(--ease-standard); }
.modal { transition: transform var(--dur-slow) var(--ease-emphasized); }
.toast { transition: opacity var(--dur-fast) var(--ease-exit); }
/* 距离缩放 — 更长滑、更长时长 */
.slide-200 { transition: transform 250ms var(--ease-standard); }
.slide-20 { transition: transform 150ms var(--ease-standard); }
/* 减弱动效 — 全塌缩 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
常见问题
- ⚠处处线性缓动 — 感机械、无重量或动量感
- ⚠20px hover 和 200px 滑同时长 — 小动感迟、大动感感即时
- ⚠无减弱动效守卫 — 前庭敏感用户全速受每动画
最佳实践
- ✓按意图命名曲线（standard/emphasized/exit）— 可读、跨产品一致
- ✓时长随距离缩放 — 20px hover 150ms、200px 滑 250ms；小动保敏
- ✓始终含减弱动效守卫 — 每时长塌缩到 0.01ms