Document: transitionrun イベント

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち transition-delay が始まる前に発生します。

バブリング あり
キャンセル可能 いいえ
インターフェイス TransitionEvent
イベントハンドラープロパティ ontransitionrun

以下の例では、単純な <div> 要素で、遅延時間を含めたトランジションでスタイル付けしたものを用意しています。

<div class="transition"></div>
<div class="message"></div>
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255,0,0,1);
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 2s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255,0,0,0);
}

このために、 transitionstart および transitionrun イベントが実行されたことを示す JavaScript を追加します。

const message = document.querySelector('.message');

document.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun fired';
});

document.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart fired';
});

document.addEventListener('transitionend', function() {
  message.textContent = '';
});

違いは以下のとおりです。

  • transitionrun は、トランジションが生成されたとき (すなわち、遅延時間の開始時) に発生します。
  • transitionstart は、実際にアニメーションが始まったとき (すなわち、遅延時間の終了時) に発生します。

仕様書

仕様書 状態 備考
CSS Transitions Level 2
transitionstart の定義
編集者草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
transitionrun eventChrome 未対応 なしEdge ? Firefox 完全対応 53IE ? Opera ? Safari ? WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報