CSSアニメーション-遅延プロパティ
例
2秒後にアニメーションを開始します。
div {
animation-delay: 2s;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このanimation-delay
プロパティは、アニメーションの開始の遅延を指定します。
アニメーション遅延値は、秒(s)またはミリ秒(ms)で定義されます。
デフォルト値: | 0秒 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.animationDelay = "1s" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS構文
animation-delay: time|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
負の値を使用します。ここでは、アニメーションがすでに2秒間再生されているかのように開始されます。
div {
animation-delay: -2s;
}
関連ページ
CSSチュートリアル:CSSアニメーション
HTML DOMリファレンス:animationDelayプロパティ