We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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
計算値以下の一括指定の各プロパティとして
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

26

1 -webkit-

12

12 -webkit-

161 2 3

4 -moz-

49 -webkit-

44 -webkit- 4

10

12.1

15 -webkit-

10.1 — 15 -o-

6.1

3 -webkit-

Gradients なし12 なし10 なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

あり

2.1 -webkit-

26

あり -webkit-

12

12 -webkit-

161 2 3

4 -moz-

49 -webkit-

44 -webkit- 4

12.1

15 -webkit-

10.1 — 15 -o-

あり

3.2 -webkit-

あり

あり -webkit-

Gradients なし ? あり なし なし なし なし

1. 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).

2. 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).

3. 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. 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.

関連情報

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

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