HTMLElement: 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 transition = document.querySelector('.transition');
const message = document.querySelector('.message');

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

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

transition.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 完全対応 74Edge 完全対応 ≤79Firefox 完全対応 53IE ? Opera 完全対応 62Safari 完全対応 13.1
完全対応 13.1
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
WebView Android 完全対応 74Chrome Android 完全対応 74Firefox Android 完全対応 53Opera Android 完全対応 53Safari iOS 完全対応 13.4
完全対応 13.4
完全対応 12
無効
無効 From version 12: this feature is behind the Web Animations preference and the CSS Animations via Web Animations preference.
Samsung Internet Android 完全対応 11.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報