fade mit drei images klappt nicht

[rernanded]

Hi versuche mit drei Bildern abwechselndes Ein- und Ausfaden. Klappt aber nicht ganz.
MONI


html:

<div id="div2">
<ul id="ifs">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>

css:

#div2 {       
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index:0;
}

#div2 ul {
list-style-type:none;
}

#div2 li span{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
opacity:0;
animation: fade 30s ease-in-out infinite;
-webkit-animation: fade 30s ease-in-out infinite;
-o-animation: fade 30s ease-in-out infinite;
-ms-animation: fade 30s ease-in-out infinite;
-moz-animation: fade 30s ease-in-out infinite;
}

#div2 li:nth-child(1) span{
background:url(images/erstes.jpg) center center no-repeat #FFF;
background-size: 100%;
}

#div2 li:nth-child(2) span{
background:url(images/zweites.jpg) center center no-repeat #FFF;
background-size: 100%;
}

#div2 li:nth-child(3) span{
background:url(images/drittes.jpg) center center no-repeat #FFF;
background-size: 100%;
}

@keyframes fade {
  20%  {opacity:1;}
  0%,  100% {opacity:0;}
}

 

[SpiceLab]

Der :nth-child()-Selektor wird auf den vorliegenden HTML-Code falsch angewendet.

<ul> ist das unmittelbare Elternelement von <li>, nicht <div id="div2">.

Also:

#div2 ul li span {...}
#div2 ul li:nth-child(1) span {...}
#div2 ul li:nth-child(2) span {...}
#div2 ul li:nth-child(3) span {...}