--- title: 'HTMLElement: transitionstart イベント' slug: Web/API/HTMLElement/transitionstart_event tags: - CSS Transitions - CSS トランジション - DOM - Event - Reference - TransitionEvent - transitionstart - イベント translation_of: Web/API/HTMLElement/transitionstart_event ---
{{APIRef}}{{SeeCompatTable}}

transitionstart イベントは、CSS トランジションが実際に開始されたとき、すなわち、{{cssxref("transition-delay")}} が終了したときに発生します。

バブリング あり
キャンセル可能 いいえ
インターフェイス {{domxref("TransitionEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}}

例

このコードでは transitionstart イベントにリスナーを追加しています:

element.addEventListener('transitionstart', () => {
  console.log('Started transitioning');
});

似ていますが、 addEventListener()の代わりに ontransitionstart プロパティを使っています:

element.ontransitionrun = () => {
  console.log('Started transitioning');
};

Live example

以下の例では、単純な {{htmlelement("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);
}

これに、{{domxref("HTMLElement/transitionstart_event", "transitionstart")}} および {{domxref("HTMLElement/transitionrun_event", "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 = 'transitionend fired';
});

{{ EmbedLiveSample('Examples', '100%', '150px') }}

相違点は以下のとおりです。

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Transitions', '#transitionstart', 'transitionstart')}} {{Spec2('CSS3 Transitions')}} 初回定義

ブラウザー実装状況

{{Compat("api.HTMLElement.transitionstart_event")}}

関連情報