どうもバナナです。
先日、transitionでアニメーションを設定した際にtransition-delayを指定しようとしたらdelayが効かないことがありました。
理想は画像に白のオーバーレイが重なってからタイトル表示するようにしたかったのですが…
実際にはdelayが効かずにタイトルがオーバーレイと一緒に表示されてしまっていました。
この事例にハマる人はあまりいないかもしれませんが、自分が忘れないためのメモとして残しておきます。
バナナは記憶力が弱いので、よく同じ間違いを繰り返すのですよ…。
transition-delayが効かなかった時のCSS
下記のCSSはアニメーションに関する部分のみを抜粋しています。
CSS
.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を指定することで解決しました。
CSS
.child_title {
transition: 0.4s;
transition-delay: 1s;
}
※変更した箇所のみを抜粋しています。
まとめ
普段はtransitionを記述した後にtransition-delayを指定しているんですけどね。
なぜか今回は順番が逆になっていました…。
こんなことでハマるとは思いもしませんでした。
怖いですねー。
では、またね。