これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

transition CSS プロパティは、transition-propertytransition-durationtransition-timing-functiontransition-delay の各プロパティの値を設定するショートハンドプロパティです。要素の 2 つの状態間のトランジションを定義できます。各状態の定義は :hover:active のような擬似クラスを使うか、JavaScript を使って動的に行います。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアinteractive
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否不可
正規順序order of appearance in the formal grammar of the values

構文

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

指定値の順番が重要であることに注意してください。第 1 パラメータは <time> であると解釈し transition-duration に割り当てます。第 2 パラメータは <time> と解釈し transition-delay に割り当てます。

プロパティの値の数が異なる場合の扱い方について、詳しくは プロパティの値の数が異なる場合 をご覧ください。要約すると、実際に動かすプロパティの数を超える transition の指定は無視されます。

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

仕様書

仕様書 策定状況 コメント
CSS Transitions
The definition of 'transition' in that specification.
草案  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート

1.0 -webkit
26.0

4.0 (2.0) -moz
16.0 (16.0)

10.0

11.6 -o
12.10 #

3.0 -webkit
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 -webkit 4.0 (2.0)
-moz
16.0 (16.0)
?

10.0 -o
12.10 #

3.2 -webkit

関連情報

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

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