动画时长参考
时长指导
| 类别 | 时长 | 使用场景 | 缓动 |
|---|---|---|---|
| Micro | 50–150ms | 按钮悬停、复选框切换、波纹效果、图标切换 | ease-out |
| Standard | 150–300ms | Tooltip 出现、下拉菜单打开、卡片翻转、小滑动 | ease-in-out |
| Medium | 300–500ms | 模态框打开、页面过渡、抽屉滑入、手风琴 | cubic-bezier(0.4,0,0.2,1) |
| Complex | 500ms–1s | Hero 入场、数据可视化、引导步骤 | cubic-bezier(0.25,0.1,0.25,1) |
| Decorative | 1s+ | 加载动画、环境效果、引导注意力 | ease-in-out / linear |
常用缓动函数（悬停预览）
ease-out
快进慢出，自然减速。
ease-in
慢进快出，适合退出动画。
ease-in-out
两端平滑，均衡感。
linear
匀速，机械感。
cubic-bezier(0.34,1.56,0.64,1)
弹簧弹跳效果，超出后回弹。
cubic-bezier(0.4,0,0.2,1)
Material Design 标准，流畅清脆。
经验法则
- 通常时间越短越好，用户不希望等待 UI 响应
- 入场动画可以比退场动画略慢
- 尊重
prefers-reduced-motion——为无障碍访问禁用或缩短动画 - 较大元素可使用略长的时长
- 避免动画触发布局的属性（优先使用 transform + opacity）
- 在 DevTools 中以 1x、2x、4x 慢动作测试