Elements in list fading in at unexpected times - html

Question

I am trying to load in separate elements in a list at different times.
The bird top left should be first, followed by the background and then the other elements.
https://imgur.com/a/Z4vKcEv
As you can see in this gif, the elements are fading in at times different than i expected. Anyone know why?
EDIT: If GIF does not load, the last element in the list loads first, and then the other elements load in order.
Here is my code:
HTML:
<ul class="anim">
<li class="logo">
<img src="imgs/bird.jpg">
</li>
<li class="fullscreen-bg">
<img class="fullscreen-bg__img" src="imgs/rockymountains.jpg">
</li>
<li class="green1">
<h1>ESTUDO</h1>
</li>
<li class="green2">
<h1>ESTUDO E TRABALHO</h1>
</li>
<li class="green3">
<h1>IMIGRAÇÃO</h1>
</li>
</div>
<li class="red">
<h1>SEU SONHO, NOSSA MISSÃO</h1>
</li>
</ul>
CSS
/* TEXT ANIMATIONS */
li {
opacity: 0;
animation: fadeIn 3.5s 1;
animation-fill-mode: forwards;
}
.anim li:nth-child(1) { animation-delay: 1s }
.anim li:nth-child(2) { animation-delay: 1.5s }
.anim li:nth-child(3) { animation-delay: 2s }
.anim li:nth-child(4) { animation-delay: 2.8s }
.anim li:nth-child(5) { animation-delay: 3.4s }
/*...*/
#keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
/* END TEXT ANIMATIONS */
From what i can tell all the children in the list are set properly. Thanks in advance for your help.

Answer 1

You have 6 "li" elements in your source but you have only set animation-delay for 1-5, that is why the 6th "li" do not have delay and will display first. Add in 1 more delay for that element will make it OK:
li {
opacity: 0;
animation: fadeIn 3.5s 1s;
animation-fill-mode: forwards;
}
.anim li:nth-child(1) { animation-delay: 1s }
.anim li:nth-child(2) { animation-delay: 1.5s }
.anim li:nth-child(3) { animation-delay: 2s }
.anim li:nth-child(4) { animation-delay: 2.5s }
.anim li:nth-child(5) { animation-delay: 3s }
.anim li:nth-child(6) { animation-delay: 3.5s }
/*...*/
#keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}