Animation.currentTime

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

Animation.currentTime 属性返回或设置动画的当前时间值(以毫秒为单位),无论动画正在运行还是已暂停。

如果动画缺少timeline,处于非活动状态或尚未播放,则当前时间返回值为 null。

语法

var currentTime = element.currentTime;
element.currentTime = someValue;

表示当前时间的数字(以毫秒为单位),或为 null。

例子

Drink Me/Eat Me game中,爱丽丝的高度是可变动的,所以它可以从小到大或从大到小。在游戏开始时,通过将她的动画的 currentTime 设置为她的 keyframeEffect 的持续时间的一半让她的高度设置在两个极端之间:

js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;

寻求动画的 50%标记的更通用的方法:

js
animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;

规范

Specification
Web Animations
# dom-animation-currenttime

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
currentTime

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见