備忘録的プログラミングリファレンス

elapsedTime プロパティ

event.elapsedTime

 elapsedTime プロパティは、CSSアニメーションやトランザクションが実行された時間(秒数)を返す AnimationEventTransitionEvent のプロパティです。
 一時停止されても戻り値は影響を受けません。
 animationstart イベントでは、このプロパティの返り値は「0」です。

detail プロパティ
document.getElementById("example").onanimationend = (event) => {
	console.log( event.elapsedTime );
}

詳しくはExampleを参照してください

ページ内 Index

- ad -

構文(Syntax)

返り値はNumber型で、読み取りのみです。

Number = event.elapsedTime;

返り値(Return Values)

Type摘要
Number秒数(seconds)

Example

 elapsedTime の例です。この例では animationend イベントの発生時のトランザクションが実行された時間を返します。
 以下の「確認」ボタンをクリックしてください。Example が動きます。
 ポインターをエレメント上にもっていくと CSS アニメーションが始まります。始まると animationstart が発生します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

- ad -