I'm attempting to create a compact checklist that displays in a single row with items appearing sequentially. To achieve this, I utilized the :nth-child() selector in CSS as shown below:
.animated {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.animated:nth-child(2) {
animation-delay: 1s
}
.animated:nth-child(3) {
animation-delay: 2s
}
.animated:nth-child(4) {
animation-delay: 3s
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.checklist_table {
border-radius: 10px;
padding: 10px;
background: #eee;
margin: 0 auto;
width: 80%;
}
.checklist_table tr {
width: 100%;
}
.checklist_table td {
padding: 10px;
width: 20%;
text-align: center;
}
.checklist_table td:nth-child(2) {
padding: 10px;
width: 80%;
text-align: left;
}<table class="checklist_table">
<tr>
<td>
<img src="checkmark.png" width="50px" class="animated fadeInUp" />
</td>
<td>
<p class="status_checklist_p">1</p>
</td>
</tr>
<tr>
<td>
<img src="checkmark.png" class="animated fadeInUp" width="50px" />
</td>
<td>
<p class="status_checklist_p">2</p>
</td>
</tr>
<tr>
<td>
<img src="checkmark.png" class="animated fadeInUp" width="50px" />
</td>
<td>
<p class="status_checklist_p">3</p>
</td>
</tr>
</table>Although the animation is functioning correctly, the delay feature seems to be ineffective. What am I missing in my implementation?