Animation: currentTime プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年3月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

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

例

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

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

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

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

タイミング攻撃やフィンガープリンティングから保護するために、 animation.currentTime の精度はブラウザー設定によっては丸められている可能性があります。 Firefox では、環境設定の privacy.reduceTimerPrecision がデフォルトで有効になっており、2 ミリ秒がデフォルト値です。同時に、privacy.resistFingerprinting を有効にすることもできます。この場合、精度は 100 ミリ秒または privacy.resistFingerprinting.reduceTimerPrecision.microseconds の値のうち、大きい方の値になります。

例えば、時間精度が縮小されている場合、animation.currentTime の結果は常に 0.002 の倍数、あるいは privacy.resistFingerprinting が有効な場合は 0.1 の倍数（または privacy.resistFingerprinting.reduceTimerPrecision.microseconds）になります。

// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 恐らくこうなります。
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 恐らくこうなります。
// 49.8
// 50.6
// 51.7
// …