动效的四条边界：节奏、暂停、可见性与减少动态

页面动效可以建立层次、解释变化，也可以制造不必要的等待。设计之前，先明确每个动作的目的：它是在帮助理解状态，还是仅仅因为“这里还能动”？

本篇目标： 用四条边界审查动画，让它增强体验，同时保留清晰的静态退路。

节奏：让主要变化更容易被看见

同一时刻不要让所有元素都争夺注意力。标题入场、内容展开和按钮反馈可以有不同节奏；关键操作的反馈应及时出现，不要等一段长动画结束才告诉用户发生了什么。

可以先让一个主要元素运动，其余保持安静，再逐步增加必要变化。每加一项，都检查它是否真的帮助了当前任务。

暂停：循环效果要能停下来

自动轮换、持续漂浮和长时间循环，需要提供容易找到的暂停方式。用户手动选择内容后，不应立刻被自动播放夺走当前选择。键盘焦点进入轮换区域时，也要考虑停止自动变化。

可见性：看不见时不必继续消耗

页面切到后台、动画区域离开视口后，可以停止相关计时器和循环效果。恢复时还要决定是否继续自动播放，避免把用户已经明确暂停的状态重置。

系统偏好：减少动态不等于内容减少

prefers-reduced-motion 可以读取系统的减少动态偏好。它提供的是用户偏好信号，需要由页面选择合适的替代效果。MDN：prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  .decorative-loop { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

不要只停止计时器，却把文字停在透明或移出屏幕的位置。静态模式应完整展示内容，手动切换功能也应继续可用。

最后检查触屏、键盘、后台标签和系统偏好变化。动效最成熟的样子，常常是读者愿意看时它足够美，读者想专心时它也能安静下来。