これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
transition-delay CSS プロパティでは、トランジションを行うプロパティにトランジションの要求が出されてから、実際にトランジション効果が始まるまでの時間を指定します。
値 0s または 0ms は、トランジションを行うプロパティの値が変更されたときに、アニメーションを即座に始めることを示します。正の値を与えると指定された時間分、トランジションの開始を遅らせます。負の値を与えるとトランジションは即座に始まりますが、アニメーションが途中から始まるように見えます。
このプロパティには複数の遅延時間を指定することができます。それぞれの遅延時間は、マスターリストを務める transition-property プロパティの指定値で対応するプロパティに適用されます。指定した遅延時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (0s) になります。また遅延時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。
構文
transition-delay: time[, time]*
- time
-
プロパティの値の変更からアニメーション効果が始まるまでの遅延時間を表す
<時間>形式の値。
例
CSS transitions の記事に、CSS transitions の例がいくつかあります。
仕様書
- CSS Transitions Module Level 3 (Working Draft)
ブラウザの互換性
| ブラウザ | 最低バージョン |
|---|---|
| Internet Explorer | 10 |
| Firefox (Gecko) | 4.0 (2.0) |
| Opera | ? |
| Safari (WebKit) | ナイトリー版 (バージョン不明) |