どうもバナナです。
先日、transitionでアニメーションを設定した際にtransition-delayを指定しようとしたらdelayが効かないことがありました。

理想は画像に白のオーバーレイが重なってからタイトル表示するようにしたかったのですが…

実際にはdelayが効かずにタイトルがオーバーレイと一緒に表示されてしまっていました。

この事例にハマる人はあまりいないかもしれませんが、自分が忘れないためのメモとして残しておきます。
バナナは記憶力が弱いので、よく同じ間違いを繰り返すのですよ…。

transition-delayが効かなかった時のCSS

下記のCSSはアニメーションに関する部分のみを抜粋しています。

transition-delayが効いていないデモ

.child::after {
  transition: 0.6s;
}
.child:hover::after {
  opacity: 1;
}
.child:hover .child_title {
  opacity: 1;
}
.child_title {
  transition-delay: 1s;
  transition: 0.4s;
}

解決方法

transitionを記述したあとにtransition-delayを指定することで解決しました。

transition-delayが効いているデモ

.child_title {
  transition: 0.4s;
  transition-delay: 1s;
}

※変更した箇所のみを抜粋しています。

まとめ

普段はtransitionを記述した後にtransition-delayを指定しているんですけどね。
なぜか今回は順番が逆になっていました…。

こんなことでハマるとは思いもしませんでした。
怖いですねー。

では、またね。