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