# 动画参考

动画服务于讲解顺序，不应成为内容的前提。每页最多使用一到两种运动方式，并保证减少动态效果时仍然完整可读。

## 情绪与选择

| 情绪 | 推荐 | 避免 |
| --- | --- | --- |
| 活泼友好 | 轻微弹性、错峰出现、短距离上移 | 连续旋转、强闪烁 |
| 科学探索 | 线条绘制、步骤依次出现、数字轻微递进 | 粒子铺满屏幕 |
| 故事叙述 | 淡入、横向推进、图片轻微放大 | 每个元素都飞入 |
| 清楚正式 | 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` 作为幻灯片切换机制；
- 不在每页添加同样的装饰动画；
- 检查动画结束后文字仍在原位置，不能出现溢出或重叠。