これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transition-property CSS プロパティは、トランジション効果 を適用する CSS プロパティの名称を指定するために使用されます。
注: アニメーションが可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。
短縮プロパティ (例えば background) を指定すると、そのサブプロパティすべてをアニメーションさせることができます。
| 初期値 | all |
|---|---|
| 適用対象 | 全要素、::before / ::after 疑似要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
none | <single-transition-property># [ ‘,’ <single-transition-property># ]*where
<single-transition-property> = all | IDENT
値
- none
- どのプロパティもトランジションを行いません。
- all
- トランジションによるアニメーションが可能なすべてのプロパティで、トランジションを行います。
- property-name
- 値が変更されたときにトランジション効果を適用するプロパティです。
例
CSS transitions の記事に、CSS transitions の例がいくつかあります。
仕様書
- CSS Transitions Module Level 3 (Working Draft)
ブラウザの互換性
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | 4.0 (2.0)-moz | 10 | (有)-o | (有)-webkit |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | (有)-webkit | 4.0 (2.0)-moz | ? | ? | (有)-webkit |