transition-delayプロパティ
transition-delayプロパティは、CSS Animationにおいてアニメーションを開始するまでの時間を指定するプロパティです。
値は秒(s)またはミリ秒(ms)で指定します。
エレメントに動きを与えますが、CSS Animationが機能するCSSプロパティのみです。
CSSのプロパティをtransition-propertyで指定することで動きを与えます。
transition-delay: 1s;
関連プロパティ
以下の関連するプロパティがあります。 transition-propertyでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。
transition | 以下のプロパティを一括指定 |
transition-property | 動きを与えるCSSプロパティを指定 |
transition-duration | CSSアニメーションの動作にかかる時間 |
transition-timing-function | CSSアニメーションの動き方 |
似たプロパティでanimationプロパティを使う方法があります。
構文(Syntax)
CSS
transition-delay: time | initial | inherit;
DOM(JavaScript)
String = object.style.transitionDelay;
object.style.transitionDelay="time | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
0s | 初期値(default値) |
time | 秒(s)またはミリ秒(ms) |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | 0s |
継承(Inherited) | No |
CSS Animation | No |
Example
transition-delayの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。
マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。
transition-delayでCSSアニメーションの開始までの時間を指定します。
transitionプロパティで一括指定する方法もあります。
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド