AnimationEvent経過時間プロパティ
例
アニメーションが実行されている秒数を確認します。
var x = document.getElementById("myDIV");
x.addEventListener("animationiteration", myRepeatFunction);
function myRepeatFunction(event) {
this.innerHTML = "Elapsed time: " + event.elapsedTime;
}
定義と使用法
経過時間プロパティは、アニメーションイベントが発生したときに、アニメーションが実行されていた秒数を返します。
注:アニメーションが一時停止されている場合(animation-delay CSSプロパティを使用)、戻り値は影響を受けません。
注:animationstartイベントの場合、このプロパティは常に「0」を返します。
このプロパティは読み取り専用です。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
elapsedTime | Yes | 10.0 | 6.0 | Yes | Yes |
構文
event.elapsedTime
技術的な詳細
戻り値: | アニメーションが実行されている秒数を表す数値 |
---|
関連ページ
HTML DOMリファレンス:animationstartイベント
HTML DOMリファレンス:animationiterationイベント
HTML DOMリファレンス:animationendイベント
HTML DOMリファレンス:AnimationEventanimationNameプロパティ
CSSリファレンス:CSS3アニメーションプロパティ
CSSリファレンス:CSS3animation-durationプロパティ