animationiterationイベント
animationiterationイベントは、CSSアニメーションの実行の繰り返えしを捉えるイベントタイプです。 AnimationEventのイベントタイプです。
CSSアニメーションの繰り返しは、CSSのanimation-iteration-countプロパティによって設定します。
このプロパティが1の時には繰り返しの実行は起きません。繰り返しで実行するためにはanimation-iteration-countプロパティが2以上である必要があります。
繰り返し設定、animation-iteration-count: 2;以上の時に、animationiterationイベントは発生します。
CSSアニメーションの実行には、以下のイベントタイプがあります。
animationstart | CSSアニメーションが始まったら |
animationiteration | CSSアニメーションが繰り返したら |
animationend | CSSアニメーションが完了したら |
Syntax
Chrome 4.0, Safari 4.0, Opera 15.0以降は"webkitAnimationEnd"で指定する必要があります。
in JavaScript
for Chrome, Safari, Opera
object.addEventListener("webkitAnimationIteration", script_);
上記以外
object.addEventListener("animationiteration", script_);
備考(Remarks)
Bubbles | yes |
Cancelable | no |
Interface | AnimationEvent |
Example
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド