transition

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

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover:active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

/* 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 個の <easing-function> の値
  • 0 ~ 2 個の <time> の値。 1 番目の値は transition-duration に割り当てられる時間として解釈され、 2 番目の値は transition-delay に割り当てられる時間として解釈されます。

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素、::before / ::after 擬似要素
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類離散値

形式文法

<single-transition>#

ここで
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>

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

ここで
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

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

単純な例

この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。

HTML

<a class="target">Hover over me</a>

CSS

.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

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

仕様書

仕様書 状態 備考
CSS Transitions
transition の定義
草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報