Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

transition-property

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

概要

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 の例がいくつかあります。

仕様書

ブラウザの互換性

機能 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

参考情報

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

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