view-timeline 是滚动驱动动画的底层机制，定义可视区域进出的进度时间线，不控制定位；position: sticky 才负责吸顶定位，二者功能正交，不可互替。
view-timeline 是什么，它和 position: sticky 有什么本质区别？
view-timeline 不是吸顶（sticky）的替代品，而是滚动驱动动画的底层机制。它本身不控制定位，只定义一个“可视区域进入/离开时的进度时间线”。真正实现吸顶效果的仍是 position: sticky；而动画（比如元素变色、缩放、透明度变化）才需要绑定到 view-timeline 上。混淆这两者会导致样式无效——比如给非 sticky 元素配 view-timeline，动画可能压根不触发。
-
view-timeline必须配合scroll-timeline的语法逻辑理解：它依赖容器的滚动上下文，且只对「在滚动容器内可见」的元素生效 - 目前仅 Chromium 115+ 原生支持（Chrome / Edge / Opera），Firefox 和 Safari 尚未实现，需用
@supports (view-timeline-name: --t)检测 - 容器必须有明确的滚动边界（如
overflow-y: scroll），且子元素需参与流式布局（不能是position: absolute）
如何正确声明 view-timeline 并绑定到元素？
关键在两步：先在滚动容器上用 view-timeline 命名一条时间线，再用 animation-timeline 把动画挂上去。注意命名必须一致，且时间线名称要用双短横线前缀（如 --nav-tl）。
.scroller {
overflow-y: scroll;
view-timeline: --nav-tl block;
}
<p>.sticky-header {
position: sticky;
top: 0;
animation: fade-in-out 1s linear;
animation-timeline: --nav-tl;
}</p><p>@keyframes fade-in-out {
from { opacity: 0.3; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}-
view-timeline: --nav-tl block中的block表示按块级方向（即滚动方向）映射时间线；若容器横向滚动，应改用inline - 动画默认从元素顶部进入视口开始（
from对应 0%，to对应 100%），但可通过view-timeline: --nav-tl block 0% 100%调整起止范围 - 若元素高度远小于容器，动画可能一闪而过；建议搭配
animation-range精确控制区间（如animation-range: entry 0% exit 100%）
为什么动画没触发？常见配置错误有哪些？
最常踩的坑不是写错语法，而是忽略了渲染上下文约束：
- 滚动容器没有设置
contain: layout style paint（尤其在复杂布局中，缺失会导致时间线无法感知元素进出） -
sticky元素的父容器不是直接滚动容器（例如多层嵌套div，但只有最外层设了overflow）→ 时间线只认最近的滚动祖先 - 使用了
display: contents或transform等会创建新格式化上下文的属性，导致元素脱离滚动流 - 错误地把
view-timeline写在要动画的元素上（它必须写在滚动容器上） - 在伪元素（如
::before）上尝试绑定animation-timeline—— 目前不支持
兼容性 fallback 怎么写才不破坏滚动行为？
不要试图用 JS 模拟 view-timeline 的帧精度，那会掉帧。稳妥做法是：基础吸顶用 position: sticky 保证功能可用，动画作为增强层单独降级。
立即学习“前端免费学习笔记（深入）”；
.sticky-header {
position: sticky;
top: 0;
}
<p>@supports (animation-timeline: --t) {
.sticky-header {
animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-timeline: --header-tl;
}
.scroller {
view-timeline: --header-tl block;
}
}-
@supports必须包裹整个相关规则块，不能只包animation-timeline单条声明 - 不要为降级方案引入 IntersectionObserver + requestAnimationFrame 手动驱动动画——在长列表或低性能设备上极易卡顿
- 如果项目必须支持 Safari，目前只能放弃
view-timeline驱动的精细动画，改用滚动事件节流 + class 切换（但要注意 iOS Safari 的scroll事件延迟问题）
滚动容器的包含关系、时间线命名一致性、以及 @supports 的包裹粒度，这三点漏掉任意一个，动画就静默失效。实际调试时，优先检查 DevTools 的 Layout 面板里是否显示 “View timeline active”，比反复改 CSS 更快。
