AnimationEvent elapsedTime 属性

DOM イベント AnimationEvent

定義と使用法

elapsedTime 属性は、アニメーションイベントが発生したときにアニメーションが既に動作した秒数を返します。

注記：アニメーションが一時停止（CSS属性 animation-delay を使用して）された場合、返り値は影響を受けません。

注記：对于 animationstart イベント、この属性は常に "0" を返します。

注記：この属性は読み取り専用です。

例

アニメーションがどれだけ秒数を動作したか確定する：

var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
  this.innerHTML = "Elapsed time: " + event.elapsedTime;
}

自分で試してみてください

文法

event

技術的詳細

返り値： 秒数を示す数値です。

ブラウザのサポート

このテーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

属性 Chrome IE Firefox Safari Opera
elapsedTime サポート 10.0 6.0 サポート サポート

関連ページ

HTML DOM 参考マニュアル：animationstart イベント

HTML DOM 参考マニュアル：animationiteration イベント

HTML DOM 参考マニュアル：animationend イベント

HTML DOM 参考マニュアル：AnimationEvent animationName 属性

CSS 参考マニュアル：CSS3 animation 属性

CSS 参考マニュアル：CSS3 animation-duration 属性

DOM イベント AnimationEvent