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

概要

transition-duration CSS プロパティは、トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定します。デフォルト値は 0s であり、これはアニメーションを実行しないことを示します。

このプロパティには複数の所要時間を指定することができます。それぞれの時間は、マスターリストを務める transition-property プロパティの指定値で対応するプロパティに適用されます。指定した所要時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (0s) になります。また所要時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。

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

構文

<time>#
time
プロパティの元の値から新しい値へ遷移するのにかかる時間を表す <time> 形式の値。

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 10.5 -o 3.1 -webkit
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? iOS 2.0 -webkit

参考情報

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

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