title: Image transition with keyframes
body: <p>Hey guys I am currently building an image show (small) with css3 keyframes, and it is working, but only on firefox in some way, and I cant seem to tackle the problem :( It should work in the latest versions of chrome firefox and safari, but its currently only working in firefox.</p>
  
  <p>Anyone can that can help?</p>
  
  <p>Here's the css that should work in al above browsers.</p>
  
  <pre><code>@keyframes cf4FadeInOut {
   0% {
     opacity:1;
   }
   17% {
     opacity:1;
   }
   25% {
     opacity:0;
   }
   92% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
  }
  
  .case-image {
    position:relative;
    height:auto;
    width:32%;
  }
  .case-image img {
    position:absolute;
    width:                100%;
    height:               auto;
    left:0;
   border:                            3px solid #f8d206;
      -moz-border-radius:                 15px;
      border-radius:                      15px;
      margin-left:                        -3px;
      margin-right:                       -3px;
  
  }
  
  .case-image img {
    -webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s;
  
    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 8s;
  
    -o-animation-name: cf4FadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 8s;
  
    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 8s;
  }
  .case-image img:nth-of-type(1) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
  }
  .case-image img:nth-of-type(2) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
  }
  .case-image img:nth-of-type(3) {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
  }
  .case-image img:nth-of-type(4) {
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
  }
  </code></pre>