动效编排指南：缓动、节奏与性能

动效不是装饰。缓动曲线、时长和 stagger 节奏对了，页面才会有「质感」。

同样的淡入，有的像「呼吸」，有的像「故障」，差别全在参数。这篇讲四个旋钮：缓动、时长、节奏、性能预算，全部可以直接用在 Motion Lab 的时间轴上。

缓动：线性是最差的选择

现实物体不会匀速启停。入场元素用 ease-out（快起慢停），退场用 ease-in，位置移动用这个万能曲线：

cubic-bezier(0.22, 1, 0.36, 1)

它前段冲、后段稳，几乎不会出错。避免两件事：全程 linear（像机械故障），以及滥用弹跳曲线（专业感瞬间归零）。

时长：150 到 300 毫秒

• 微反馈（按钮按压、开关）：150ms 左右

• 常规位移与淡入：200 到 300ms

• 超过 500ms：用户会以为页面卡住了

时长和移动距离正相关：位移越大给越长，但封顶 500ms。

节奏：stagger 的数学

列表逐项出现时，相邻两项延迟 40 到 80ms。10 个卡片、每项 60ms，总时长约 600ms 加上各自动画，节奏刚好读完一行。公式：

第 n 项延迟 = n × 60ms

Motion Lab 的时间轴上，把每条轨道的起点按这个间隔错开，预览窗口立刻能看出节奏对不对。

性能：只动 transform 和 opacity

浏览器合成器只廉价处理这两个属性的动画。width、height、top、left 都会触发重排，帧率直接掉。规则：

• 位移动画写成 transform: translateY(20px)，不写 top

• will-change 只加给「正在」动画的元素，别全局撒

• 目标帧率 60fps，用 DevTools 的 Performance 面板录一遍确认

可访问性：尊重 reduced-motion

系统开启「减弱动态效果」的用户，应看到无动画版本。FORMA 导出的动效已内置这条媒体查询，自己加 CSS 时不要覆盖掉它：

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

一组可以直接抄的参数

• 首屏标题入场：ease-out，260ms，逐行 stagger 60ms

• 卡片悬停上浮：translateY(-4px)，150ms，ease-out

• 页面转场：300ms，ease-in-out

• 成功反馈（对勾画出）：400ms，ease-out，延迟 100ms 给确认感