animation-delay

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

概要

animation-delay CSS プロパティは、アニメーションをいつ開始するかを指定します。これにより、アニメーションの設定が要素に適用されてからいくらか時間がたった後に、アニメーションを始めることができます。

このプロパティの初期値である 0s は、アニメーションが適用されたらすぐにアニメーションを開始することを示します。他の値は、要素にアニメーションの設定が適用されてからの遅延時間を指定します。その時間が経過した後に、アニメーションが始まります。

遅延時間に負の値を指定すると、アニメーションは直ちに開始されます。しかし、アニメーションが途中から始まるように見えます。例えば、遅延時間に -1s を指定するとアニメーションは直ちに始まりますが、それは 1 秒経過した時点からになります。

遅延時間に負の値を指定しているが開始値を明示していない場合は、開始値として要素にアニメーションが適用された時点の値を取得します。

アニメーション関連のプロパティをまとめて設定できる短縮プロパティである animation プロパティを使用すると便利でしょう。

構文

Formal syntax: <time>#
animation-delay: 3s
animation-delay: 2s, 4ms

<time>
 
要素にアニメーションが適用されてから、アニメーションを開始するまでの遅延時間。この値は、秒 (単位 s で指定) またはミリ秒 (単位 ms で指定) で指定することができます。単位を指定しない場合は、宣言が無効になります。

CSS アニメーション を参照してください。

仕様

仕様書 策定状況 コメント
CSS Animations 草案  

ブラウザ実装状況

機能 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

関連情報

 

Document Tags and Contributors

Contributors to this page: Potappo, FredB, ethertank, yyss
最終更新者: yyss,
サイドバーを隠す