动画参考

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

情绪与选择

情绪	推荐	避免
活泼友好	轻微弹性、错峰出现、短距离上移	连续旋转、强闪烁
科学探索	线条绘制、步骤依次出现、数字轻微递进	粒子铺满屏幕
故事叙述	淡入、横向推进、图片轻微放大	每个元素都飞入
清楚正式	200–350ms 淡入或位移	复杂转场、视差
安静专注	500–800ms 淡入、很小的位移	夸张弹跳

通用 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 作为幻灯片切换机制；
不在每页添加同样的装饰动画；
检查动画结束后文字仍在原位置，不能出现溢出或重叠。

1.4 KiB Raw Blame History Unescape Escape

动画参考

情绪与选择

通用 CSS

验收重点

1.4 KiB

Raw Blame History