title: Animation delay property to change content at fixed intervals
body: <p>I am trying to animate two pictures so that they change at fixed intervals but the problem is that the second image appears quickly and fades I need a way to make the delay property to repeat i have refereed this but that doesn't seem to work   <a href="https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating">CSS animation delay in repeating</a><br>
   <a href="http://jsfiddle.net/fc3nb5rL/2/" rel="nofollow noreferrer">http://jsfiddle.net/fc3nb5rL/2/</a></p>
  
  <p>I think my problem is somewhere here </p>
  
  <pre><code>@-webkit-keyframes anim {
  from {
      z-index:1;
  }
  to {
      z-index:-2;
  }
  }
  .back {
  -webkit-animation:anim 5s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function: ease-in-out;
  }
  
  @-webkit-keyframes anim2 {
  from {
      z-index:1;
  }
  to {
      z-index:-2;
  }
  }
  </code></pre>