これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transition CSS プロパティは、transition-property、transition-duration、transition-timing-function、transition-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. |
草案 |
ブラウザ実装状況
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 2.1 -webkit | 4.0 (2.0) -moz 16.0 (16.0) |
? | 3.2 -webkit |