Chrome/Edge 115+是唯一稳定支持animation-timeline的环境；Firefox需手动启用flag且功能残缺，Safari完全不支持；animation-timeline:scroll()常静默失效，主因是默认绑定root但实际滚动发生在局部容器、元素被fixed/transform隔离、或滚动容器无真实溢出。
Chrome/Edge 115+ 是目前唯一能稳定跑通 animation-timeline 的环境；Firefox 需手动开 flag 且功能残缺，Safari 完全不支持——别指望写了就跨浏览器生效。
为什么 animation-timeline: scroll() 总是静默失效
它不是报错，而是直接被忽略。常见原因有三个：
-
scroll()默认绑定 root（document.documentElement），但多数页面滚动实际发生在某个overflow-y: scroll的 div 里，root 并没在滚动 - 目标元素被
position: fixed、transform或contain: paint隔离出滚动流，DevTools 里getBoundingClientRect().top值不随滚动变化 - 滚动容器没有真实溢出：
scrollHeight <= clientHeight，哪怕加了overflow-y: scroll，浏览器也认为“无需滚动”，时间线无法建立
怎么写一个真正能动的最小闭环
必须同时满足三件事，缺一不可：
- 滚动容器有明确高度 +
overflow-y: scroll（不能是body或html） - 用
@scroll-timeline显式命名并绑定source: selector(#scroller)，orientation: vertical（或axis: y）不能省 - 动画元素上写
animation-timeline: --my-timeline，且@keyframes必须带animation-duration（比如1s），否则时间线无效
示例关键片段：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
@scroll-timeline --fade-in {
source: selector(#main-scroller);
orientation: vertical;
start: 0px;
end: 500px;
}
.target {
animation: fade-in 1s linear;
animation-timeline: --fade-in;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
animation-range 和视口触发的边界控制
想让动画在“元素进入视口 20% 时开始，离开前 10% 时结束”，不能靠 scroll() 自动推算——它只认滚动容器的总行程。得用：
-
animation-range: entry 20% exit 90%：基于元素自身在视口中的可见比例，不是文档滚动百分比 - 这个写法依赖
view-timeline机制，需配合view-timeline-name和view-timeline-axis，和scroll-timeline是两套系统 -
entry/exit关键字只在 Chrome/Edge 125+ 稳定支持，旧版会回退为整段播放
显示/隐藏这类离散状态，别硬套 scroll-timeline
display: none 无法参与 CSS 动画，visibility 虽可动画但不释放布局空间，opacity 只是视觉隐藏。真正需要“滚动到才渲染”或“彻底卸载”，必须用 IntersectionObserver：
- 监听
isIntersecting状态，显式切换 class 或style.display - 兼容性好（IE11+ 可 polyfill），无渲染副作用，且能精准控制首次进入/每次进出
- 哪怕你在 Chrome 里用
animation-timeline做了渐隐，也该 fallback 到IntersectionObserver处理 Safari/Firefox
最易被忽略的一点：滚动驱动动画不是“写完就动”，而是“滚动上下文成立才动”。检查 Computed 面板里 animation-timeline 是否生效，比反复调 @keyframes 更关键。
