taste-motion

动效品味

动效的作用是解释界面，而不是装饰界面。每个动画都必须回答：发生了什么、在哪里、接下来要做什么。

1. 时长刻度（固定令牌）

令牌	时长	用途
--dur-fast	100–150ms	悬停、按下状态、焦点环
--dur-base	200–300ms	简单的进入动画、状态变化（切换、打开/关闭）
--dur-slow	400–600ms	区块显现、页面级过渡、对话框打开
--dur-hero	600–900ms	唯一的 Hero 进入动画序列

低于 100ms 会让人感觉像闪烁（除非是刻意用于粗野主义风格组件包的瞬间切换）。超过 900ms 会让人觉得网站很慢。

2. 缓动令牌（固定）

• 标准（UI 状态）： cubic-bezier(0.4, 0, 0.2, 1) — 快速开始，平稳结束。悬停和切换的默认值。
• 强调（进入/显现）： cubic-bezier(0.22, 1, 0.36, 1) — 尾段平缓悠长，带来高级感。
• 退出： cubic-bezier(0.4, 0, 1, 1) 或更快 — 退出动画要比进入动画更利落。
• 弹簧/过冲（仅限趣味风格组件包）： cubic-bezier(0.34, 1.56, 0.64, 1) — 每个元素最多使用一次，绝不用于循环。
• 绝不将 ease-in-out 用作万能选项。除跑马灯/进度条外，绝不使用 linear。

3. 动画对象（以及不该动的对象）

添加动画： transform 和 opacity。仅此而已。确保 60fps。

绝不添加动画： width/height（会造成布局抖动——使用 transform: scale）、margin、top/left（使用 transform）、大尺寸的 box-shadow（使用预先模糊的伪元素）、大面积表面上的 filter: blur。

4. 编排（进入动画）

• 每个区块一个场景： 滚动显现时，区块中的元素分 2–3 个阶段进入（标题 → 正文 → CTA），间隔 60–120ms，时长和缓动相同。错开进入体现层级。
• 显现动画的移动距离 ≤ 20px（translateY 8–16px）并配合透明度变化。距离过大会显得像 PowerPoint。
• 缩放进入幅度 ≤ 0.96→1，且仅用于对话框/弹出层，绝不用于完整区块。
• Hero： 一个序列，总时长 600–900ms，元素只进入一次。不要循环浮动，不要重复波浪动画。
• 循环动画限额： 每页只允许一类循环动画——环境状态指示器（动态圆点、加载器、旋转指示器）。其他任何循环动画都算错误。

5. 微交互（悬停、按下、焦点）

• 悬停：100–150ms，标准缓动，只改变一个属性（背景色调、边框、translateY −1 到 −3px）。绝不要同时改变颜色、位置和阴影。
• 按下：与悬停效果相反（向下移动、关闭阴影），时长 80–120ms。
• 可见焦点：2px 焦点环，对比度为 3:1，outline-offset: 2px，通过 100ms 淡入。替换方案缺失时，绝不使用 outline: none。
• 禁用状态：完全没有悬停状态——元素必须呈现静止感（透明度 0.4–0.5，不改变指针）。
• 仅在加载/状态变化时，为可见的状态变化添加过渡；无法感知的过渡就是死代码。

6. 滚动与布局

• 滚动触发： 使用 IntersectionObserver（或在支持的情况下使用 CSS animation-timeline），每个元素只显现一次，然后结束。不要让元素在每次滚动经过时都重新播放动画。
• 粘性定位： 可用于导航栏和区块标签；粘性定位加动画会带来性能风险，请勿为其添加动画。
• 视图过渡/页面过渡： 时长 300–500ms，仅在有意义时使用共享元素移动（列表 → 详情）。在 prefers-reduced-motion 下完全禁用。
• 布局过渡： 使用 FLIP 模式（基于 transform），绝不使用重新布局动画。

7. 减少动态效果（不可妥协）

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

• 在 CSS 条件生效时，默认完全不动：不使用视差、自动滚动轮播、跑马灯。
• 只允许内容出现，不添加动效（在 1 帧内将透明度从 0 变为 1）。

8. 检查清单（出现以下情况时，页面不合格……）

• 任一元素的动画持续时间超过约 1.5s（循环动画／加载动画除外）。
• 每个视口中的循环动画元素超过一个。
• 动画涉及任一 width、height、margin 或 top 属性。
• 元素显现的移动距离超过 20px。
• 将 ease-in-out 用作全局缓动函数。
• 页面上的每个元素都在加载时播放动画（弹跳入场狂欢）。
• 完全没有对 prefers-reduced-motion 的处理。

如果你无法用一句话解释某个动画，就删除它。