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

概要

transition-property CSS プロパティは、トランジション効果 を適用する CSS プロパティの名称を指定するために使用されます。

注: アニメーションが可能なプロパティのセットは変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。

短縮プロパティ (例えば background) を指定すると、そのサブプロパティすべてをアニメーションさせることができます。

初期値all
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

 

構文

none | <single-transition-property>#

where
<single-transition-property> = all | <custom-ident>

none
どのプロパティもトランジションを行いません。
all
トランジションによるアニメーションが可能なすべてのプロパティで、トランジションを行います。
property-name
値が変更されたときにトランジション効果を適用するプロパティです。

CSS transitions の記事に、CSS transitions の例がいくつかあります。

仕様書

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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