触发动画与滚动驱动动画

来源：scroll-animations/SKILL.md，关联 CSS/Motion 的滚动揭示配方。

5.1 先分页面用途

作者倾向让高频产品界面保持直接可读，营销页只选少数 2–4 个有意义的时刻。首屏内容不要等滚动事件才显示。这里的数量和“产品不做 reveal”是克制动效的设计立场，不妨碍有明确解释价值的数据变化动画。

5.2 两种时钟

把 scrubbed 再套一个跟随 duration/spring，会有追赶滚动条的延迟。原文说“没有 easing”是要求默认直接对应；有意的非线性映射可以存在，但必须知道这会改变手与画面的关系。

5.3 Triggered reveal 的起点

营销场景可用 opacity＋translateY(10–16px)，约 400–600ms、强 ease-out；组内约 80–120ms 错峰是营销配方，和产品 UI 的 30–80ms 不应混为统一 token。只揭示一次，触发后 unobserve。

IntersectionObserver 的 rootMargin 改检测根的边界，不代表“元素已经显示多少像素”。底部负 margin 会缩小根、延后相交；正 margin 可提前到达前触发。要多少比例可用 threshold 等条件，避免把不同概念混用。

5.4 不依赖 JS 也能读内容

普通 CSS 默认可见，JS 成功初始化后才给即将动画的元素附加起始样式，之后播放。不要把所有正文默认 opacity:0 再赌脚本能运行。若观察器不支持、初始化失败或用户 reduce，直接显示。IntersectionObserver 比每次 scroll 写 React state 更适合阈值触发。

5.5 CSS Scroll Timeline

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .figure {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

这是进度随可视范围变化的示意，不是 reveal-once。View 以元素与滚动容器的相对位置定义进度，scroll 以滚动容器进度定义；把 timeline 放在 shorthand 之后，避免被 shorthand 重置。支持范围按目标浏览器核对，回退为可见静态内容。

5.6 Motion 的滚动值

已有 Motion 时可用 useScroll＋useTransform 派生进度条、装饰偏移，避免每像素 setState。UseInView 是可见性布尔状态，不是连续进度；once 控制是否停止重复观察，margin 扩大/缩小检测根。margin 的官方定义。不要把 margin:"100px" 解释成“元素出现了 100px”。

5.7 视差

只动装饰层，保持正文稳定；原文差速不超过约 15% 是保守起点，不是规范。移动端视口短、惯性滚动强，优先不加。Reduce 下关闭装饰视差。尽量 transform，但仍需测实际合成和内存成本。

5.8 Sticky 叙事

每段滚动应揭示一个真正的新步骤，原文建议固定叙事段约 2–3 个视口高，避免用户感觉被困住。反向滚动能倒放、继续滚动能离开，正文和关键内容还有可读路径。不改写 wheel delta，不把一格滚轮强制映射一整屏，不强制用户看完整动画。

5.9 平滑滚动与图层

锚点 smooth scrolling 只在 no-preference 开启；减少动态时使用直接定位。Will-change 只在持续滚动确有收益的少数元素使用，并考虑激活/清理；不要给全页 reveal 预建图层。滚动与布局、图片加载叠加时尤其容易掉帧。

Skill 的实现方式

先用页面类型、首屏、频次、用途做 gate，再分两类时钟，最后选 API 和回退。这种顺序防止 AI 用同一个“淡入组件”套所有滚动需求。

自测与答案

1. 元素进视口后自己播完，是 scrub 吗？是 triggered reveal。

2. 上滚时总重播的问题怎么查？once、unobserve、播放标记及路由返回策略。

3. 图片未载入会影响什么？元素几何、触发点、sticky 长度和布局稳定。

4. JS 失败后正文消失？默认可见与渐进增强设计有问题。