transitionstart ( ontransitionstart )イベント

　transitionstart ( ontransitionstart )イベントは、簡易な CSS アニメーションとして実行する transition において実行が始まったら発生するイベントです。
　transitionstart ( ontransitionstart )イベントは、遅滞時間の設定に関係なく CSS アニメーションとして実行が始まったら発生します。

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

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

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

　似たイベントに、transitionrun イベントがあります。このイベントは CSS アニメーションとして遷移が始まったら（実際に再生が始まったら）イベントが発生します。
　transitionstart イベントは動画の再生が出来なくても再生の準備ができたら発生します。再生の準備から実行が問題なく進むと、transitionrun と transitionstart はほぼ同時に発生したようにみえます。遅滞時間があると、transitionrun イベントは遅れて発生します。

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

構文（Syntax）

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

in HTML

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

in JavaScript

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

addEventListener()

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

object.addEventListener("transitionstart ", function_name);

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

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

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

備考（Remarks）


Bubbles	Yes
Cancelable	No
Interface	Event
Supported HTML Elements	全般

Example

　transitionstart ( ontransitionstart )イベントの例です。

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

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