これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
animation-delay CSS プロパティは、アニメーションをいつ開始するかを指定します。これにより、アニメーションの設定が要素に適用されてからいくらか時間がたった後に、アニメーションを始めることができます。
このプロパティの初期値である 0s は、アニメーションが適用されたらすぐにアニメーションを開始することを示します。他の値は、要素にアニメーションの設定が適用されてからの遅延時間を指定します。その時間が経過した後に、アニメーションが始まります。
遅延時間に負の値を指定すると、アニメーションは直ちに開始されます。しかし、アニメーションが途中から始まるように見えます。例えば、遅延時間に -1s を指定するとアニメーションは直ちに始まりますが、それは 1 秒経過した時点からになります。
遅延時間に負の値を指定しているが開始値を明示していない場合は、開始値として要素にアニメーションが適用された時点の値を取得します。
アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。
構文
Formal syntax: <time>#
animation-delay: 3s animation-delay: 2s, 4ms
値
<time>- 要素にアニメーションが適用されてから、アニメーションを開始するまでの遅延時間。この値は、秒 (単位
sで指定) またはミリ秒 (単位msで指定) で指定することができます。単位を指定しない場合は、宣言が無効になります。
例
CSS アニメーション を参照してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Animations The definition of 'animation-delay' in that specification. |
草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10 # |
4.0-webkit |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
? | 12-o | (有)-webkit |
関連情報