timeline-scope 不是标准属性，未被任何主流浏览器实现，也未被 w3c 采纳；它源于已废弃的草案，css 中声明会被忽略；替代方案需用 animation-timeline 配合显式定义的 @scroll-timeline 或 @view-timeline，或通过 javascript 桥接状态。
timeline-scope 不是 HTML 或 CSS 标准属性，目前（截至 2024 年）不存在于任何主流浏览器引擎中，也未被 W3C 规范采纳。你无法通过 timeline-scope 将子元素的时间线暴露给祖先使用。
这是个常见误解，可能源于对 CSS 动画时间线提案（如早期的 CSS Containment Module Level 2 草案）的误读或过时信息。该草案曾讨论过 timeline-scope，但已被移除，从未实现。
为什么你在 DevTools 或文档里找不到 timeline-scope
因为它是已废弃的实验性概念。Chromium、Firefox、Safari 均未实现它。尝试在 CSS 中写 timeline-scope: contain; 或类似值，浏览器会直接忽略——不报错，也不生效。
- Chrome：从无相关 flag 或内部支持
- Firefox：未在
about:config或动画调试面板中暴露该能力 - Safari：Web Inspector 中无 timeline scope 相关上下文菜单或面板
真正能“暴露时间线”的替代方案：CSS @keyframes + animation-timeline
CSS 时间线控制的现行标准路径是 animation-timeline（配合 @scroll-timeline 或 @view-timeline），但它**不支持跨作用域“暴露”子元素时间线给父级调用**——时间线定义必须显式声明在作用域内，且不能被外部元素“引用”或“继承”。
例如，你不能让一个 <div class="parent"> 的动画去绑定子元素定义的 <code>@scroll-timeline child-tl；时间线必须在同级或外层作用域定义，并由动画自身指定：
@scroll-timeline parent-tl {
source: selector(#scroller);
orientation: vertical;
}
.parent {
animation: slide-in 1s linear;
animation-timeline: parent-tl;
}
-
animation-timeline只接受已命名的、全局可见的@scroll-timeline或@view-timeline，不支持动态拾取子元素的隐式时间线 - 子元素若自己用了
@view-timeline，那只是它自己的动画在用，父元素无法“借用”那个时间线对象 - 当前没有 CSS 机制能让元素“导出”其滚动/视图状态供祖先动画消费
需要父子时间联动？只能靠 JavaScript 驱动
如果真实需求是“父容器根据子元素的滚动位置或进入视口状态来触发动画”，CSS 目前做不到自动绑定，必须用 JS 桥接：
- 用
IntersectionObserver监听子元素进入视口，手动更新父元素的style.setProperty('--sub-progress', ratio) - 用
ScrollObserver（或监听scroll+getBoundingClientRect()）计算子元素相对滚动偏移，映射为 CSS 自定义属性 - 父元素动画改用
@keyframes配合animation: use-progress，其中关键帧依赖--sub-progress变量（需搭配animation-composition: replace和 JS 更新）
这不是“暴露时间线”，而是把子元素的状态转成可被 CSS 读取的信号——这是目前唯一可靠路径。
实际开发中，最容易被忽略的一点是：很多人花时间查 timeline-scope 的语法和兼容性，却没意识到它根本不存在。与其等待一个不会落地的特性，不如确认你的场景是否真的需要 CSS 时间线，还是用 JS 控制更直接、更可控。
