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ウェブアニメーション API のプロパティで、実行中か一時停止中かを問わず、アニメーションの現在の時刻をミリ秒単位で返したり設定したりします。

アニメーションが timeline を持たない、アクティブではない、またはまだ再生されていない場合、 currentTime の返値は null です。

現在の時刻をミリ秒で表す数値。アニメーションを無効にする場合は null

ゲーム Drink Me/Eat Me game では、アリスの身長がアニメーションし、小さくなったり大きくなったりします。ゲームを始めるときには、アニメーションの currentTime を KeyframeEffect の持続時間の半分に設定することで、彼女の身長を2つの極の中間に設定します。

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

より一般的な意味としては、アニメーションの 50% の位置に移動することを意味します。

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

時間精度の低下

タイミング攻撃やフィンガープリンティングから保護するために、 animation.currentTime の精度はブラウザー設定によっては丸められている可能性があります。 Firefox では、 privacy.reduceTimerPrecision 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。

js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …

Firefox では、 privacy.resistFingerprinting を有効にすると、精度を 100ms または privacy.resistFingerprinting.reduceTimerPrecision.microseconds の値のどちらか大きい方にすることができます。

仕様書

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

関連情報