CSS fading picture gallery

Question

I'm trying to make a multiple images gallery that switches and fades In and Out the pictures automatically. I'm trying to do it with CSS only, but it doesn't work.

Here is the HTML

<div id="cf4a">
  <img src="img/1a.jpg"/>   
  <img src="img/2a.jpg"/>
  <img src="img/3a.jpg" />
  <img src="img/4a.jpg"/>
</div>

And here is the CSS

@keyframes cf4aFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a {
  position:relative;
  top:200px;
  right:0;
  left:0;
  bottom:0;
  background:red;
  height:280px;
  width:100%;
  margin:auto;
}

#cf4a img {
  position:absolute;
  width:100%;
  height:280px;
  left:0;
  animation-name: cf4aFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

#cf4a img:nth-of-type(1) {
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  animation-delay: 0;
}

It won't switch! I'm pretty new to HTML & CSS, so I used this guide: http://css3.bradshawenterprises.com/cfimg/

Thanks in advance :)

P.S i know you can do this with jQuery, but I'd rather use CSS.

Answer 1

@keyframes cf4FadeInOut class name is wrong according to your code.

Should be "@keyframes cf4aFadeInOut" instead ??