documenttimeline.currenttime 在现代浏览器中不可用,因它是被废弃的实验性api,w3c规范从未纳入;应使用 performance.now() 模拟全局时间基准,或通过 animation.currenttime 获取单个动画进度。

DocumentTimeline.currentTime 在绝大多数浏览器中根本不可用——它是个被废弃的实验性 API,现代标准里没有这个属性。
为什么 DocumentTimeline.currentTime 会报错或返回 undefined
这个属性最早出现在 Chrome 49 左右的 Web Animations 实验实现中,但很快就被移除。W3C 规范从未将其纳入正式标准;当前规范中的 DocumentTimeline 只有一个构造函数,不暴露 currentTime 属性。你看到的任何“可用”示例,基本都来自过时文档或未更新的博客。
- Chrome 71+、Firefox 63+、Safari 13.1+ 均不支持
document.timeline.currentTime - 调用它会直接抛出
TypeError: Cannot read property 'currentTime' of undefined或返回undefined - 即使在旧版 Chrome 中启用
chrome://flags/#enable-experimental-web-platform-features,该行为也不稳定且已被彻底弃用
替代方案:用 performance.now() 模拟全局动画时间基准
如果你需要一个随页面生命周期单调递增、高精度的时间戳(类似旧 DocumentTimeline 所承诺的“全局动画时钟”),performance.now() 是唯一可靠选择。它从页面加载开始计时,单位为毫秒,精度可达微秒级,且不受系统时钟调整影响。
- 它不是“动画专属”,但所有 Web Animations、CSS 动画、
requestAnimationFrame都可基于它做同步 - 不要用
Date.now()—— 它受系统时间跳变影响,可能导致动画倒播或卡顿 - 若需相对时间(比如“动画已运行多少毫秒”),建议在动画启动时记录一次
performance.now(),后续用差值计算
const startTime = performance.now();
function animate() {
const elapsed = performance.now() - startTime;
// 用 elapsed 驱动关键帧逻辑
requestAnimationFrame(animate);
}
animate();
如果真要读取某个动画的当前播放位置,该用 Animation.currentTime
每个独立的 Animation 实例(比如 element.animate() 返回的对象)才有可靠的 currentTime 属性,它表示该动画自身的时间进度(单位毫秒),受播放速率、暂停状态影响。
-
animation.currentTime可读可写,写入会跳转到对应时间点(自动触发重绘) - 若动画未播放或处于
idle状态,currentTime可能为null,需先检查animation.playState - 注意:CSS 动画对应的
Animation对象需通过document.getAnimations()获取,不能直接访问
const anim = element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000 });
console.log(anim.currentTime); // 例如:234.56(毫秒)
真正麻烦的地方在于:没有跨动画实例的统一时间轴。所谓“全局动画时间”只是个理想概念,实际必须靠开发者用 performance.now() 自行对齐,或用动画组(AnimationGroup)等仍在草案阶段的 API —— 但那些连 caniuse 都没收录。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











