animationcancel ( onanimationcancel )イベント

　animationcancel ( onanimationcancel )イベントは、CSS アニメーションが中断されたら発生する AnimationEvent インターフェイスのイベントです。

animationcancel イベント

document.getElementById('example').addEventListener("animationcancel", (event)=>{
	console.log( 'event type : ' + event.type );
});

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

ページ内 Index

構文（Syntax）
備考（Remarks）
Example
関連するイベント

- ad -

構文（Syntax）

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

in HTML

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

in JavaScript

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

addEventListener()

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

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

object.addEventListener("animationcancel", function_name);

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

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

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

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

備考（Remarks）

Bubbles	yes
Cancelable	no
Interface	MouseEvent

Example

　animationcancel ( onanimationcancel )イベントの例です。以下の「確認」ボタンをクリックしてください。Example が動きます。
　以下の例では、ポインターをエレメントから外すことで animationcancel イベントが発生します。画面をクリックすることで dispatchEvent() メソッドを使い、animationcancel イベントを発生させてもいます。
　CSS アニメーションは中断されたと JavaScript で判断されますが、CSS アニメーションが継続されます。CSS アニメーションの実行中止は定義しておく必要があるようです。

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

HTML内容

CSS内容

Script内容