animation-delayプロパティ
animation-delayプロパティは、CSS animationの実行までの待ち時間を指定するプロパティです。
マイナスを指定すると指定秒後から始まります。例えば、-2sと定義すると2秒後からCSS animationが始まります。
CSSアニメーションには、アニメーションの定義とエレメントにおけるその定義したアニメーションの名称を指定する必要があります。
.class { animation-delay: 1s; animation-name: mymove; } @keyframes mymove { from { } to { box-shadow: 10px 10px; } }
transitionプロパティを使う方法もあります。
構文(Syntax)
CSS
animation-delay: [ time | initial | inherit ];
DOM(JavaScript)
object.style.animationDelay
object.style.animationDelay = "[ time | initial | inherit ]"
値(Values)
Value | 摘要 |
---|---|
none | 初期値(default値)。 |
time | 0。単位は"s"または"ms"。マイナスも設定できる。 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | 0 |
継承(Inherited) | no |
変化(Animatable) | no |
Example
animation-delayの例です。エレメントにマウスポインターをもっていくと1秒後にCSSアニメーションを開始します。
ここでは疑似クラス:hoverにCSSアニメーションを設定しています。
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド