CSS Transitions | Frontend Practical Guide

Widely available 安心して使用可能。すべての主要ブラウザで広くサポートされている。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`transition`	26	12	16	9	26	9
DOM API
`CSSTransition` CSSTransition はWeb Animations API のインターフェイスで、CSS トランジションで使用される Animation オブジェクトです。	84	84	75	13.1	84	13.4
`transitionProperty` transitionProperty は CSSTransition インターフェイスのプロパティで、トランジションの展開されたトランジションプロパティ名を返します。これは、トランジションが生成された個別指定の CSS プロパティです。	84	84	75	13.1	84	13.4
`transitioncancel_event` transitioncancel イベントは、 CSS トランジションがキャンセルされたときに発生します。	87	87	53	13.1	87	13.4
`transitionend_event` transitionend イベントは、 CSS トランジションが完了したときに発生します。トランジションが完了前に削除された場合、例えば transition-property が削除されたり、 display が none に設定されたりした場合、イベントは生成されません。	26	18	51	7	26	7
`transitionrun_event` transitionrun イベントは、 CSS トランジションが最初に生成されたとき、すなわち transition-delay が始まる前に発生します。	74	12	53	13.1	74	13.4
`transitionstart_event` transitionstart イベントは、 CSS トランジションが実際に始まったとき、すなわち transition-delay が終了した後に発生します。	74	12	53	13.1	74	13.4
`TransitionEvent` TransitionEvent インターフェイスは、トランジションに関する情報を提供するイベントを表します。	27	12	4	7	27	7
`elapsedTime` TransitionEvent.elapsedTime は読み取り専用プロパティで、このイベントが発行された時にアニメーションが実行されていた秒数を float 型で返します。この値は transition-delay プロパティの影響を受けません。	2	12	4	6	18	6
`propertyName` propertyName は TransitionEvent オブジェクトの読み取り専用プロパティで、このトランジションに関連する CSS プロパティの名前を格納した文字列です。	2	12	4	6	18	6
`pseudoElement` TransitionEvent.pseudoElement は読み取り専用プロパティで、アニメーションが実行されている '::' で始まる擬似要素の名前が入っている文字列です。トランジションが擬似要素で実行されない場合は、要素は空文字列 ("") です。	2	79	23	6	18	6
`TransitionEvent` TransitionEvent() コンストラクターは新しい TransitionEvent オブジェクトを返します。これはトランジションに関するイベントを表します。	27	14	23	7	27	7
その他
`css.properties.transition-delay` CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。	26	12	16	9	26	9
`css.properties.transition-duration` transition-duration は CSS のプロパティで、トランジションによるアニメーションが完了するまでの再生時間を秒数またはミリ秒数で指定します。既定値は 0s であり、これはアニメーションを実行しないことを示します。	26	12	16	9	26	9
`css.properties.transition-property` transition-property は CSS のプロパティで、トランジション効果を適用する CSS プロパティを指定します。	26	12	16	9	26	9
CSS プロパティ
`IDENT value` `IDENT`値	1	12	16	4	18	3
`all`	1	12	4	3.1	18	2
`none`	1	12	4	3.1	18	2
その他
`css.properties.transition-timing-function` transition-timing-function は CSS のプロパティで、トランジション効果の影響を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。	26	12	16	9	26	9
CSS プロパティ
`ease`	1	12	4	3.1	18	2
`ease-in`	1	12	4	3.1	18	2
`ease-in-out`	1	12	4	3.1	18	2
`ease-out`	1	12	4	3.1	18	2
`jump` `steps()` の `jump-` キーワード	77	79	65	14	77	14
`linear`	1	12	4	3.1	18	2
`step-end`	1	12	4	3.1	18	2
`step-start`	1	12	4	3.1	18	2
`all`	1	12	4	3.1	18	2
`ease`	1	12	4	3.1	18	2
`ease-in`	1	12	4	3.1	18	2
`ease-in-out`	1	12	4	3.1	18	2
`ease-out`	1	12	4	3.1	18	2
`gradients can animate` グラデーションをアニメーション化できる		12		Preview
`linear`	1	12	4	3.1	18	2
`none`	1	12	4	3.1	18	2
`step-end`	1	12	4	3.1	18	2
`step-start`	1	12	4	3.1	18	2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

.button {
  background-color: #3b82f6;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

ライブデモ

backgroundcolor. transition

CSS Transitions backgroundcolor. transition demo.

プレビュー全画面表示

Size. transition

CSS Transitions Size. transition demo.

プレビュー全画面表示

compositeproperty

CSS Transitions compositeproperty demo.

プレビュー全画面表示

実務での使いどころ

ホバーエフェクト

ボタンやリンクのホバー時に色やサイズの変化を滑らかにする。
状態変化の視覚的フィードバック

フォーム入力のフォーカスやバリデーション結果を滑らかに表示する。

注意点

display や visibility など、補間できないプロパティには transition が効かない。
transition-duration が長すぎるとUIがもっさり感じるため、200〜400ms程度が推奨。

対応ブラウザ

基本構文

ライブデモ

backgroundcolor. transition

Size. transition

compositeproperty

実務での使いどころ

ホバーエフェクト

状態変化の視覚的フィードバック

注意点

アクセシビリティ

参考リンク