【CSS】transition-delayの使い方、効果の開始時間を適用させる

シュウ

今回は【CSS】transition-delayの使い方、効果の開始時間を適用させる!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
transitionプロパティについて学びたい方へ
今回はtransition-delayで効果が開始されるまでの時間についての解説になります。

今回は、transitionに関する記事パート4になります。
transitionトランジション効果とは、「時間的変化」の意味を持ちます。

transitionプロパティは、原則として「変化前のスタイル」に適用させます。
例として、「a」、「a:hover」があるとしたら、変化前である「a」の方に適用させます。

[記事の内容]

transition-delayの使い方について

transition-delayプロパティとは、トランジション効果が開始されるまでの時間を指定します。
書き方は以下のようになります

/*--例:transition-delay--*/
要素 {
	transition-delay: 値;
}

指定できる値

transition-delay
今回はここを解説！
トランジション効果が開始されるまでの時間を適用させます。
transition-timing-function　
解説の記事ありますよ
トランジション効果の変化(速度)のタイミングを適用させます。
transition-property　
解説の記事ありますよ
トランジション効果を適用させます。
transition-duration　
解説の記事ありますよ
トランジション効果が完了するまでの時間を指定します。

transition-delay 指定方法について

transition-delayプロパティとは、トランジション効果が開始されるまでの時間を適用させます。
2sと指定した場合は2秒後に効果が開始されます。

指定できる値

数値+単位(初期値は0)
「2s」のように数値と単位で指定します。指定できる単位は「s」（秒）、「ms」(ミリ秒)になります。
カンマ(,)で区切って複数の時間指定も可能です。

効果が開始されるまでの時間について

「デフォルトボタン」では、マウスオーバーした際に、瞬時に背景色が変更されます。
「1秒後変化ボタン」では、transition-delay: 1sを指定することで1秒後に効果が開始されます。
「組み合わせボタン」では、前回解説したdurationプロパティと組み合わせることで、
マウスオーバーした際に「0.5秒後に1秒かけて完了」します。

効果が開始

デフォルトボタン

1秒後変化ボタン

組み合わせボタン

<a class="btn01">デフォルトボタン</a>
<a class="btn02">1秒後変化ボタン</a>
<a href="btn03">組み合わせボタン</a>

/*--1秒後変化ボタン--*/
a.btn02 {	
	padding: 20px 100px;
	display: inline-block;
	color: #333;
	text-decoration :none;
	text-align: center;
	background-color: #ffbf4b;
	
	transition-property: background-color,color;
	transition-delay: 1s; /*--1秒後に効果が開始されます--*/
}

/*--組み合わせボタン--*/
a.btn03 {
	/*--以下省略--*/
	transition-property: background-color,color;
	transition-duration: 1s;
	transition-delay: 0.5s; /*--0.5秒後に効果が開始されます--*/
}

a.btn02:hover,
a.btn03:hover{
	color: #fff;
	text-decoration :none;
	background-color: #fd5e5a;
}