transition

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> || <timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

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

仕様書

仕様書 策定状況 コメント
CSS Transitions
transition の定義
草案 初回定義
初期値一括指定の各プロパティとして
適用対象すべての要素、::before / ::after 疑似要素
継承なし
計算値一括指定の各プロパティとして
アニメーションの種類個別

ブラウザー実装状況

BCD tables only load in the browser

関連情報