transition

CSS の transition プロパティは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

遷移 (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 の利用
• TransitionEvent