このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

onanimationiteration”イベントハンドラHTML Living Standardで定義

記事Aug. 31st,2021
CSSのアニメーションの1回の周期が終了した時に発生するイベント
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

onanimationiteration”イベントハンドラ

イベント名 animationiteration”イベント
インターフェース AnimationEvent”インターフェース
バブリング Yes
キャンセル No

onanimationiteration”イベントハンドラはCSSのanimation”プロパティなどによるアニメーションの1回の周期が終了した時に発生する“animationiteration”イベントを処理するためのイベントハンドラです。

animationiteration”イベントはアニメーションが終了した時に発生する“animationend”イベントと同時には発生しません。なのでアニメーションが繰り返されない場合には“animationiteration”イベントは一度も発生しません。

onanimationiteration”イベントハンドラはすべてのHTMLの要素でコンテント属性とIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでIDL属性として使用できます。

別名として“webkit”の接頭辞がある“onwebkitanimationiteration”が使用でき、“HTML Living Standard”の仕様書にはこの名前で記載されています。

サンプルコード

IDL属性

var count = 0;
document.getElementById("sampleElement").onanimationiteration = function() {
count++;
document.getElementById("counterNumber").innerHTML = count;
};
表示サンプルはリンク先を参照新しいウィンドウで表示します

コンテント属性

<div onanimationiteration="counter();">♪</div>

<p>イベントの発生回数:<output id="counterNumber">0</output>回</p>
表示サンプルはリンク先を参照新しいウィンドウで表示します
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク