动效设计指南
时长指南
| 时长 | 使用场景 |
|---|---|
| 50–100ms | 微交互：悬停状态、按钮点击、开关 |
| 100–200ms | UI反馈：复选框、工具提示出现、菜单项高亮 |
| 200–300ms | 简单过渡：下拉菜单展开、卡片翻转、展开 |
| 300–500ms | 页面元素：弹窗打开、侧边栏滑入、主视觉动画 |
| 500–1000ms | 复杂过渡：页面切换、引导步骤 |
| >1000ms | 仅用于加载状态、叙事性动画 |
缓动函数（悬停行查看效果）
ease (default)
慢开始，快中间，慢结束
ease-in
慢开始（退出动画）
ease-out
慢结束（进入动画）
ease-in-out
两端平滑（弹窗、抽屉）
linear
匀速（加载条、旋转）
CSS动画参考
/* Fade in from bottom */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
animation: fadeInUp 300ms ease-out both;
}
/* Smooth entrance for modals */
.modal {
animation: scaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* Skeleton loading shimmer */
@keyframes shimmer {
to { background-position: 200% center; }
}
.skeleton {
background: linear-gradient(90deg, #1c2035 25%, #2a2f4a 50%, #1c2035 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
动效设计原则
- ✅ ✅ 有目的性 — 每个动画都应传递信息，而非纯装饰
- ✅ ✅ 即时响应 — 动画应即时响应输入（<100ms）
- ✅ ✅ 自然感 — 进入元素使用ease-out（减速感觉自然）
- ✅ ✅ 一致性 — 整个产品使用统一的动效系统
- ❌ ❌ 不要给所有元素加动画——适度使用保持意义
- ❌ ❌ 尊重prefers-reduced-motion媒体查询保障无障碍访问