transition-delay プロパティ

　transition-delay プロパティは、CSS アニメーションの開始時間を指定するプロパティです。値は秒（s）またはミリ秒（ms）で指定します。開始までの時間を遅滞時間ともいいます。

　transition-delay プロパティは、transition プロパティの１つです。
transition プロパティによって :hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができます。

transition-delayプロパティ

transition-property: background;
transition-duration: 5s;
transition-timing-function: ease-in-out;
transition-delay: 1s;

詳しくは「Example」を参照してください。

　transition-delay が機能するには、CSS アニメーション化するプロパティを指定する transition-property の設定が必要です。

　CSS アニメーションとして動作させるには、transition-duration、transition-timing-functionも必要でしょう。

　注意点としては、transitionはエレメントに動きを与えますが、CSS アニメーション機能がある CSS プロパティのみです。

　より詳細に CSSアニメーションを設定したい場合は、 animationプロパティを使います。

構文(Syntax)

transition-delay: time | initial | inherit;

値の取得

String = object.style.transitionDelay;

値の設定

object.style.transitionDelay="time | initial | inherit";

　transition-delayの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。

　マウスをエレメントに乗せてから１秒後にCSSアニメーションが始まります。さらに、マウスをエレメントから離すと１秒後に戻るアニメーションが始まります。

　transition-delayでCSSアニメーションの開始までの時間を指定します。

　transitionプロパティで一括指定する方法もあります。

　transition-duration に関連するプロパティには以下があります。 transition-propertyでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。