CSStransition プロパティは、 transition-propertytransition-durationtransition-timing-functiontransition-delay一括指定プロパティです。

遷移 (transition) によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は :hover:active のような疑似クラスで定義するか、 JavaScript を使用して動的に設定します。

構文

/* 1つのプロパティへの適用 */
/* プロパティ名 | 時間 */
transition: margin-right 4s;

/* プロパティ名 | 時間 | 遅延 */
transition: margin-right 4s 1s;

/* プロパティ名 | 時間 | 時間関数 */
transition: margin-right 4s ease-in-out;

/* プロパティ名 | 時間 | 時間関数 | 遅延 */
transition: margin-right 4s ease-in-out 1s;

/* 2つのプロパティへの適用 */
transition: margin-right 4s, color 1s;

/* 変化するすべてのプロパティへの適用 */
transition: all 0.5s ease-out;

/* グローバル値 */
transition: inherit;
transition: initial;
transition: unset;

transition プロパティは、1つまたは複数の単体プロパティによる遷移を、コンマで区切って指定します。

それぞれの単体プロパティの遷移では、単体のプロパティ(または特別な値である all および none)に適用される遷移を記述します。記述は以下の通りです。

  • 遷移を適用するプロパティを表す0~1個の値。以下のうちの一つです。
    • none キーワード
    • all キーワード
    • CSS プロパティの名前である <custom-ident>
  • 使用するタイミング関数を表す0~1個の <single-transition-timing-function> の値
  • 0~2個の <time> の値。1番目の値は transition-duration に割り当てられる時間として解釈され、2番目の値は transition-delay に割り当てられる時間として解釈されます。

プロパティ値の一覧が同じ長さではない場合については、 how things are handled を参照してください。 つまり、実際にアニメーション化されているプロパティの数を超える余分な遷移の記述は無視されます。

構文形式

<single-transition>#

where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

CSS transitions の記事に、トランジションの例がいくつかあります。

仕様書

仕様書 策定状況 コメント
CSS Transitions
transition の定義
草案 初回定義

初期値一括指定の各プロパティとして
適用対象すべての要素、::before / ::after 疑似要素
継承なし
メディアinteractive
計算値一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 26
完全対応 26
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
補足 Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
補足 Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 10.1 — 15
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari 完全対応 6.1
完全対応 6.1
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 16
補足
完全対応 16
補足
補足 Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
補足 Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
補足 Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 44
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1
完全対応 12.1
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 10.1 — 14
接頭辞付き
接頭辞付き -o- のベンダー接頭辞が必要
Safari iOS 完全対応 あり
完全対応 あり
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Gradients
実験的
Chrome 未対応 なしEdge 完全対応 12Firefox 未対応 なしIE 完全対応 10Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, fscholz, Sebastianz, ethertank, sosleepy, yyss
最終更新者: mfuji09,