48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# 动画参考
|
||
|
||
动画服务于讲解顺序，不应成为内容的前提。每页最多使用一到两种运动方式，并保证减少动态效果时仍然完整可读。
|
||
|
||
## 情绪与选择
|
||
|
||
| 情绪 | 推荐 | 避免 |
|
||
| --- | --- | --- |
|
||
| 活泼友好 | 轻微弹性、错峰出现、短距离上移 | 连续旋转、强闪烁 |
|
||
| 科学探索 | 线条绘制、步骤依次出现、数字轻微递进 | 粒子铺满屏幕 |
|
||
| 故事叙述 | 淡入、横向推进、图片轻微放大 | 每个元素都飞入 |
|
||
| 清楚正式 | 200–350ms 淡入或位移 | 复杂转场、视差 |
|
||
| 安静专注 | 500–800ms 淡入、很小的位移 | 夸张弹跳 |
|
||
|
||
## 通用 CSS
|
||
|
||
```css
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(28px);
|
||
transition: opacity .55s ease, transform .55s ease;
|
||
}
|
||
|
||
.slide.visible .reveal {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.slide.visible .reveal:nth-child(2) { transition-delay: .08s; }
|
||
.slide.visible .reveal:nth-child(3) { transition-delay: .16s; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.reveal,
|
||
.slide.visible .reveal {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 验收重点
|
||
|
||
- 切页时先切换可见状态，再触发内容动画；
|
||
- 不用 `display: none` 作为幻灯片切换机制；
|
||
- 不在每页添加同样的装饰动画；
|
||
- 检查动画结束后文字仍在原位置，不能出现溢出或重叠。
|