CSS multiple animation keyframes sequence and delay not working - html

Question

I created 2 keyframes. The 1st keyframe is applied to all elements with class .drop-in. And the 2nd keyframe is specific to an element with class .look-at-me, when the 1st keyframe animation has finished.
The problem is, even though I have added a delay on the 2nd keyframe for the class .look-at-me, all animations are still occurring at the same time instead of applying the delay.
Can someone help me fix this?
Check my work here: Codepen
HTML :
<ul class="box-list">
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in look-at-me">
<h1>The Box</h1>
</div>
</li>
<li>
<div class="box drop-in">
<h1>The Box</h1>
</div>
</li>
</ul>
LESS :
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
}
.box-list {
list-style: none;
li {
width: 140px;
height: 145px;
display: inline-block;
margin-right: 24px;
position: relative;
&:last-child {
margin-right: 0;
}
.drop-in {
-webkit-animation: drop-in-anim 0.3s forwards;
-moz-animation: drop-in-anim 0.3s forwards;
animation: drop-in-anim 0.3s forwards;
opacity: 0;
}
.look-at-me {
-webkit-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
-moz-animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
animation: drop-in-anim 0.3s forwards, look-at-me-anim 0.5s forwards;
-webkit-animation-delay: 0s, 20s;
-moz-animation-delay: 0s, 20s;
animation-delay: 0s, 20s;
}
&:nth-child(1) {
.drop-in {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
}
&:nth-child(2) {
.drop-in {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
}
&:nth-child(3) {
.drop-in {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
}
&:nth-child(4) {
.drop-in {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
}
.box {
padding: 6px;
border: 1px solid #333;
background: #fff;
z-index: 5;
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
&:hover,
&.look-at-me {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
}
}
}
#-webkit-keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#-moz-keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#keyframes drop-in-anim {
0% {
opacity: 0;
position: absolute;
top: 50px;
}
100% {
opacity: 1;
top: 0;
}
}
#-webkit-keyframes look-at-me-anim {
50% { -webkit-transform: scale(1.4); }
75% { -webkit-transform: scale(1.2); }
100% { -webkit-transform: scale(1.3); margin: 0 12px; }
}
#-moz-keyframes look-at-me-anim {
50% { -moz-transform: scale(1.4); }
75% { -moz-transform: scale(1.2); }
100% { -moz-transform: scale(1.3); margin: 0 12px; }
}
#keyframes look-at-me-anim {
50% { transform: scale(1.4); }
75% { transform: scale(1.2); }
100% { transform: scale(1.3); margin: 0 12px; }
}

Answer 1

You are overwriting your delay with this.
&:nth-child(3) {
.drop-in {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
}
you could also write the delay in shorthand:
.look-at-me {
-webkit-animation:drop-in-anim 0.3s ease-in 0.4s forwards,
look-at-me-anim 0.5s ease-in 1s forwards;
}