timeline: null 并非脱离时间线，而是不绑定任何时间线，动画处于静止未激活状态，需手动调用 play() 和 currentTime 等方法驱动，且必须配合 requestAnimationFrame 才能保证渲染同步。
timeline: null 是什么，它真能脱离文档时间线吗
timeline: null 确实是 Web Animations API 中用于将动画从默认文档时间线（document.timeline）解绑的合法配置项，但它不是“脱离时间线”而是“不绑定任何时间线”。这意味着动画不再自动随页面渲染或滚动推进，但也不会自动播放——它变成一个“静止的、未激活的动画对象”，必须手动调用 play()、pause()、currentTime 等方法驱动。
常见错误现象：
- 设置了
{ timeline: null }后动画完全没反应，以为“已就绪”，其实它压根没启动 - 误以为
currentTime赋值会自动触发重绘，实际需要显式play()或pause()触发一次状态同步
关键点在于：timeline: null 只是切断时序依赖，不提供播放控制逻辑——你得自己当它的时钟和调度器。
怎么创建并手动驱动 timeline: null 动画
要真正手动控制，分三步走，缺一不可：
立即学习“前端免费学习笔记（深入）”；
- 创建动画时传入
{ timeline: null } - 显式调用
animation.play()（哪怕只是为激活状态） - 通过
animation.currentTime设置当前毫秒偏移，并配合animation.pause()维持静止帧
const elem = document.querySelector('#box');
const anim = elem.animate(
[{ opacity: 0 }, { opacity: 1 }],
{ duration: 1000, timeline: null }
);
<p>// 必须调用 play() 才能让 currentTime 生效（否则设了也白设）
anim.play();</p><p>// 手动跳到 600ms 处并暂停
anim.currentTime = 600;
anim.pause();</p>注意：
-
currentTime只在动画处于running或paused状态时可读写；新建后初始状态是idle，直接赋值无效 - 每次修改
currentTime后，若想让样式更新，必须确保动画至少处于paused状态（play()后立刻pause()也行）
为什么不用 requestAnimationFrame 驱动 currentTime 就容易卡住
单纯循环设置 currentTime 而不搭配 requestAnimationFrame，会导致样式不更新或严重掉帧。因为：
- DOM 渲染不是实时响应
currentTime的，它依赖浏览器的合成流程 - 没有
requestAnimationFrame调度，你的赋值可能发生在非绘制时机，被合并或丢弃
正确做法是用 requestAnimationFrame 做主循环，并在每一帧中更新 currentTime 和调用 pause()（防止自动播放）：
let startTime = performance.now();
const duration = 1000;
<p>function tick() {
const elapsed = performance.now() - startTime;
anim.currentTime = Math.min(elapsed % duration, duration);
anim.pause(); // 关键：阻止 timeline: null 动画自行推进（它不会，但这是保险）
requestAnimationFrame(tick);
}
tick();</p>性能提示：
- 不要用
setInterval替代requestAnimationFrame，时间精度差且易与渲染脱节 - 若动画需精确同步音频或传感器数据，
currentTime应基于外部时间源（如audioContext.currentTime），而非performance.now()
timeline: null 动画和 CSS @keyframes 动画混用时的坑
timeline: null 动画与 CSS 动画共存时，最容易被忽略的是CSS 动画优先级覆盖问题：
- 如果元素同时有 CSS
animation和 JS 创建的timeline: null动画，且控制同一属性（如transform），CSS 动画的声明会覆盖 JS 动画的输出，除非显式用animation: none清除 -
getAnimations()返回的列表里，timeline: null动画的timeline属性是null，但它的effect依然生效——只是没人驱动它
务必检查并清理干扰源：
-
elem.style.animation = 'none' -
elem.getAnimations().forEach(a => a.cancel())（注意：这会取消所有动画，包括你想保留的timeline: null实例） - 更安全的做法是只取消非
timeline: null的动画：elem.getAnimations().filter(a => a.timeline !== null).forEach(a => a.cancel())
手动控制的核心代价就是责任转移——浏览器不再帮你管何时播、播多快、播到哪，这些全得你算清楚、调对、盯紧。尤其在复杂交互动画中，currentTime 的单位（毫秒）、起始偏移、循环模运算、以及和用户输入的时间对齐，稍有疏忽就会出现跳变或卡顿。
