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

animationiteration ( onanimationiteration )イベント

 animationiteration ( onanimationiteration )イベントは、CSSアニメーションの実行の繰り返えしが起きたら発生するイベントです。
 AnimationEvent インターフィスのイベントです。

animationiteration イベントを追加( onanimationiteration イベントハンドラーとして追加)
document.getElementById('example').addEventListener("animationiteration", (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

 CSSアニメーションの繰り返しは、CSSのanimation-iteration-countプロパティによって設定します。 このプロパティが1の時には繰り返しの実行は起きません。繰り返しで実行するためにはanimation-iteration-countプロパティが2以上である必要があります。
 繰り返し設定、animation-iteration-count: 2;以上の時に、animationiterationイベントは発生します。

関連するイベント

 CSS アニメーションに関するイベントハンドラーには以下があります。

onanimationcancelCSS アニメーションが中断されたら
onanimationendCSS アニメーションが終了したら
onanimationiterationCSS アニメーションが一通り再生したら
onanimationstartCSS アニメーションが開始したら

構文(Syntax)

 タグエレメントにイベントハンドラーを定義する方法には以下があります。

in HTML

<tagelement onanimationiteration="function(); ...;">

in JavaScript

object.onanimationiteration  = function(){... };

addEventListener()

 イベントタイプを第1引数に指定します。関数を直接に呼び出には、関数名のみを第2引数に指定します。ただし、その関数に event 以外の引数が渡せません。

function function_name(){
	console.log( event );
}

object.addEventListener("animationiteration", function_name);

 スクリプトを直接記述する方法があります。この方法では、関数に引数を指定して呼び出せます。

object.addEventListener("animationiteration", ()=>{ ... },false);
// または
object.addEventListener("animationiteration",function(){ ... },false);

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

 Chrome 4.0, Safari 4.0, Opera 15.0以前は"webkitAnimationEnd"で指定する必要があります。

備考(Remarks)

Bubblesyes
Cancelableno
InterfaceAnimationEvent

Example

 animationiteration ( onanimationiteration )イベントの例です。以下の「確認」ボタンをクリックしてください。Example が動きます。
 animationiteration イベントは繰り返しが起きた時に発生するイベントです。 繰り返しになるときに「animationiterationイベントが起きました!!」と表示されます。

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