ViewTimeline 是 CSS Containment 规范中新增的视口驱动动画机制，通过 view-timeline 和 animation-timeline 等属性，使动画根据元素在视口中的可见比例而非时间或滚动位置运行；目前仅 Chromium 内核浏览器（Chrome 115+、Edge 115+、Opera 101+）原生支持，Firefox 和 Safari 完全不支持且无启用计划。
ViewTimeline 是什么，浏览器支持现状如何
ViewTimeline 不是 HTML 标签，也不是 CSS 里随便加个 class 就能用的功能。它是 CSS Containment 规范中新增的时间线定义机制，配合 animation-timeline 和 view-timeline-name 等属性，让动画能根据元素在视口中的可见比例（而非滚动位置或时间）来驱动。
目前仅 Chromium 内核浏览器（Chrome 115+、Edge 115+、Opera 101+）原生支持，Firefox 和 Safari 完全不支持，且无明确启用计划。开启前必须确认用户环境，否则动画会直接回退到默认 auto 时间线（即按毫秒播放），失去“可视区域驱动”效果。
- 必须启用
chrome://flags/#enable-experimental-web-platform-features（旧版 Chrome 可能需手动开启） - 生产环境务必加
@supports (animation-timeline: view(tl))检测，否则 CSS 会被整条忽略 - 不要指望用 polyfill 补齐：目前没有可靠方案模拟基于 IntersectionObserver 的逐帧视口比例计算
怎么定义一个基础 ViewTimeline
定义 ViewTimeline 的核心是两步：给目标元素打上 timeline 名称 + 在动画规则里绑定它。
/* 步骤1：在滚动容器（通常是 body 或自定义 scroll container）上设置 view-timeline */
body {
view-timeline: --vertical tl;
}
<p>/<em> 步骤2：给要触发动画的元素指定 timeline 名称和范围 </em>/
.card {
view-timeline-name: --vertical;
view-timeline-axis: y; /<em> 只响应垂直方向进入/退出 </em>/
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
view-timeline必须写在滚动容器上，不是动画元素本身；常见错误是直接写在.card上，结果无效 -
view-timeline-name值必须和view-timeline中声明的名称一致（如--vertical），区分大小写 -
view-timeline-axis只能是x或y，不能写block或inline，否则整个声明被忽略 - timeline 默认覆盖整个滚动容器高度（
cover），若想限制范围，可用view-timeline: --tl y 0% 100%显式指定起止
怎么让动画真正随可视比例运行
光有 timeline 定义还不够，动画必须显式切换时间线，并用 timeline-scope 或百分比关键帧对齐视口进度。
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
<p>.card {
animation: fade-in 1s linear;
animation-timeline: view(--vertical); /<em> 绑定刚才定义的 timeline </em>/
animation-range: entry 0% entry 100%; /<em> 元素刚出现到完全出现的过程 </em>/
}
注意：
-
animation-timeline值必须是view(名称)形式，写成view-timeline(--vertical)或漏掉view()外壳都会失效 -
animation-range决定动画在哪段可视区间内播放，可选值包括entry、exit、cover、contain，后跟两个百分比（如entry 20% entry 80%表示从进入视口 20% 到 80% 区间播放） - 如果没写
animation-range，浏览器会使用默认值entry 0% entry 100%，但某些版本 Chrome 下可能表现不稳定，建议显式声明
常见失效原因和调试技巧
ViewTimeline 最容易卡在“写了但没反应”，多数不是语法错，而是隐含条件不满足：
- 滚动容器没设
overflow-y: scroll或auto：ViewTimeline 只在有滚动行为的容器上生效，body默认是overflow: visible，需强制设为scroll或用div.scroll-container替代 - 动画元素未参与文档流：
position: absolute且父容器没设position: relative，可能导致视口检测失败；建议先用position: static调通再调整定位 - 关键帧里用了不支持的属性：比如
transform: scale()没问题，但filter: blur()在部分 Chrome 版本中会跳帧；可用opacity或translateY()先验证逻辑 - DevTools 里看不到 timeline 数据：Chrome 119+ 才在 Rendering 面板提供
View timeline调试开关，旧版只能靠console.log+ IntersectionObserver 对照排查
实际项目中，别一上来就套 ViewTimeline。先用 JS 手动监听 IntersectionObserver 输出 intersectionRatio，确认滚动逻辑符合预期，再迁移到 CSS 方案——省去一半排查时间。
