これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。
概要
transition-duration CSS プロパティは、トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定します。デフォルト値は 0s であり、これはアニメーションを実行しないことを示します。
このプロパティには複数の所要時間を指定することができます。それぞれの時間は、マスターリストを務める transition-property プロパティの指定値で対応するプロパティに適用されます。指定した所要時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (0s) になります。また所要時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。
| 初期値 | 0s |
|---|---|
| 適用対象 | 全要素、::before / ::after 疑似要素 |
| 継承 | 不可 |
| メディア | interactive |
| 計算値 | 指定値 |
| Animation type | discrete |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
<time>#
- time
- プロパティの元の値から新しい値へ遷移するのにかかる時間を表す
<time>形式の値。
例
CSS transitions の記事に、CSS transitions の例がいくつかあります。
仕様書
- CSS Transitions Module Level 3 (Working Draft)
ブラウザの互換性
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 |