transitionrun ( ontransitionrun )イベント

　transitionrun ( ontransitionrun )イベントは、簡易な CSS アニメーションとして実行する transition において CSS アニメーションの動きによる遷移がはじまったら発生するイベントです。
　transitionrun ( ontransitionrun )イベントは、遅滞時間が設定されたいると実際にアニメーションとしての遷移が始まったら発生します。遅滞時間がなければ、transitionrun と transitionstart ほぼ同時ごろに発生します。

transitionrun イベントを追加（ ontransitionrun イベントハンドラーとして追加）

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

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

　似たイベントに、transitionstart イベントがありますが、こちらは遅滞時間に関係なく CSS アニメーションの実行があればイベントが発生します。

　CSS の transition プロパティは、スタイル変更を CSS アニメーションの効果として表示することができます。

構文（Syntax）

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

in HTML

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

in JavaScript

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

addEventListener()

　関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。

object.addEventListener("transitionrun ", function_name);

　スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。

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

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

備考（Remarks）


Bubbles	Yes
Cancelable	No
Interface	Event
Supported HTML Elements	全般

Example

　transitionrun ( ontransitionrun )イベントの例です。

　以下の例は２秒後に CSS アニメーションの遷移が始まります。遷移が始まると transitionrun イベントが発生します。

transition による CSS アニメーションに関連するイベント

イベント	概要
ontransitioncancel	CSS アニメーションの効果が中断されたら
ontransitionend	CSS アニメーションが終了したら
ontransitionrun	CSS アニメーションが始まったら。遅滞時間の間は発生しない
ontransitionstart	遅滞時間に関係なく、設定された CSS アニメーションが始まったら