静态营销页仍大量依赖手写 cubic-bezier，却在 Safari 上显得“发黏”，因为曲线无法精确描述多段营销常见的轻微回弹与二次减速。CSS linear() 用百分比停表把输出进度写成折线，既避免堆叠关键帧，也避免把弹簧逻辑塞进 JavaScript。2026 年 的落地关键是把缓动与滚动时间线、prefers-reduced-motion、以及 WebKit 合成器行为一起验收，而不是只在 Chrome 无痕窗口看一眼。
请与 滚动驱动动画与静态 HTML、固定导航与 scroll-padding 的锚点体验 交叉阅读：前者决定输入轴是滚动还是时间，后者决定锚点滚动是否会与粘性头部抢空间。
linear() 语法与停点密度
每个停点由“输出进度 + 输入百分比”组成，重复百分比会形成硬折角。为常见营销缓出，至少保留三个内部停点；总数建议控制在五到九个之间，再多会导致设计师无法在评审里肉眼 diff。
.card {
transition: transform 420ms
linear(0, 0.12 8%, 0.32 24%, 0.87 68%, 1);
}务必确认最后一个停点在 100% 输入时到达 1，否则会出现最后几像素“提前结束”的错觉，尤其在窄屏卡片上更明显。
何时仍用 cubic-bezier
| 场景 | cubic-bezier | linear() | 备注 |
|---|---|---|---|
| 简单淡入淡出 | 足够 | 过度 | 保持默认即可 |
| 多段回弹 | 难调 | 自然 | 停点表达更直观 |
| 滚动绑定 | 僵硬 | 灵活 | 输入轴与滚动百分比对齐 |
与滚动时间线协同
当 animation-timeline 绑定命名滚动时间线时，缓动的输入轴是滚动进度而非墙钟时间。若滚动距离短于 400px，中段斜率过陡会让段落出现“二次加速”的不适感，应适当压低中段输出。
减弱动效与低数据模式
在 @media (prefers-reduced-motion: reduce) 下，将位移动画时长压到 120ms 以内，或改为仅透明度变化。低电量模式会合并帧，过度依赖模糊滤镜会被误认为掉帧，应限制并发模糊动画在两个可见元素内。
@supports 渐进增强
先写 cubic-bezier 基线，再用 @supports (animation-timing-function: linear(0, 1)) 覆盖 advanced 曲线，并确保层叠顺序不会被压缩工具重排。
Safari 真机清单
- 在稳定版 Safari 与 Technology Preview 各录屏一次，比较帧间隔。
- 开启减弱动态效果与降低透明度组合测试。
- 在 1.0 与 1.25 设备像素比下截图，观察次像素抗锯齿对亮度感知的影响。
- 用 Web 检查器的时间线面板检查紫色布局条是否异常变宽。
合成层与卡顿纪律
优先动画 transform 与 opacity；filter 模糊与 linear() 同开时，旧 GPU 可能退回主线程混合。为并发模糊动画设置 40ms 的错峰启动，避免首屏同时起三个模糊。
与滚动驱动章节一致，记得为长页面配置合理的 containment，避免字体子集异步到达时引发布局抖动与滚动动画互相抢主线程。
设计交付：把 Figma 曲线翻译成 linear()
设计工具导出的是贝塞尔手柄，不是停点列表。请设计师提供归一化曲线图：横轴 0–100% 表示输入时间或滚动进度，纵轴表示输出进度，并标出“品牌回弹”“二次减速”等语义拐点。前端以拐点为锚，再插入中间停点，直到在目标视口宽度下像素位移误差小于一像素。
把最终通过的 linear() 字符串登记在设计令牌表的“动效”页，附上录制链接与 Safari 版本号；不要在 Slack 里口头传递，否则下一次视觉改版会悄悄替换曲线却无人察觉。
will-change 与 GPU 瓦片预算
滥用 will-change: transform 会在教育市场常见的旧款 Air 上耗尽 GPU 瓦片内存，表现为随机掉帧。视口内同时存在的 will-change 提示不要超过三个，并在 animationend 后移除提示，避免长期占用合成层。
若 hero 同时叠加视频、模糊与位移动画，应为低端设备提供“轻量 token”，在容器查询或脚本检测到的低内存模式下切换为纯透明度过渡。
年度动效审计与回归策略
字体行高、字重与 Web 字体子集变更都会改变位移的可见速度，即便 linear() 数值未改。建议每年固定一周回放历史录屏，与当前生产站点并排放映；若差异超过团队约定的阈值，触发重新签字的动效评审。
审计时同时检查深色模式与浅色模式：同一曲线在深色背景上往往显得更“冲”，可能需要单独下调前段斜率。
若站点需要同时支持简体与繁体排版，请在两种文字密度下各测一次：笔画复杂度会改变行盒高度，从而影响滚动时间线的体感速度。
常见问题
linear() 会取代 cubic-bezier 吗？
不会，简单场景仍用三次贝塞尔更轻。
能与滚动驱动动画一起用吗？
可以，但要重新标定停点与滚动距离。
减弱动效用户怎么办？
缩短或取消位移动画，保留必要反馈。
一条曲线多少停点合适？
建议五到九个。
缓动是主观体验，必须在真实 Safari 与真实显示器上签字，而不是依赖 Linux CI 的无头截图。MacHTML 的 Mac mini 云端租用约 $16.9/天，可在发布周保持一台 Apple Silicon 真机专门录屏比对；Apple Silicon 静音与低功耗适合长时间并排回放，也不会像笔记本那样因省电策略偷偷改变帧合成策略。
弹性租期也方便代理公司并行多个客户项目：为每个品牌单独保留 macOS 用户与字体缓存，避免互相污染预览端口。