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 2020年3月.

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

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

値

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

例

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

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 の値のどちらか大きい方にすることができます。