CSS исчезающая галерея изображений

Я пытаюсь создать галерею нескольких изображений, которая автоматически переключает и автоматически выводит изображения In и Out. Я пытаюсь сделать это только с помощью CSS, но это не сработает.

Вот 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>

И вот 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;
}

Он не переключится! Я новичок в HTML и CSS, поэтому я использовал это руководство: http://css3.bradshawenterprises.com/cfimg/

Заранее спасибо :)

PS Я знаю, что вы можете сделать это с помощью jQuery, но я бы предпочел использовать CSS.