title: Css animation displaying 3 images at a time
body: <p>I'm trying to show 3 images (out of currently 12) at a time using css animations. I would like to display image 1-3 first, then 4-6, then 7-9, and then 10-12.</p>
  
  <p>I have this so far, but I can't get my head around how to use the :nth selectors to display the 3 next while hiding the rest.</p>
  
  <p>This is more or less what I have so far:</p>
  
  <pre><code>#crossfade &gt; img {
    max-width: 30%;
    height: auto;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    animation: imageAnimation 30s linear infinite 0s;
  }
  
  #crossfade &gt; img:nth-child(n+3) {
    animation-delay: 6s;
  }
  
  @keyframes imageAnimation {
    0% {
      opacity: 0;
      animation-timing-function: ease-in;
    }
    8% {
      opacity: 1;
      animation-timing-function: ease-out;
    }
    17% {
      opacity: 1
    }
    25% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }
  </code></pre>
  
  <p>Example below [<a href="http://jsfiddle.net/hajmd/1113/" rel="nofollow noreferrer">or click here for jsfiddle</a>]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#crossfade {
    height: 185px;
    width: 100%;
    position: relative;
  }
  
  #crossfade &gt; img {
    max-width: 30%;
    height: auto;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s;
  }
  
  #crossfade &gt; img:nth-child(n+3) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
  }
  
  #crossfade &gt; img:nth-child(n+3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
  }
  
  #crossfade &gt; img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
  }
  
  #crossfade &gt; img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
  }
  
  @keyframes imageAnimation {
    0% {
      opacity: 0;
      animation-timing-function: ease-in;
    }
    8% {
      opacity: 1;
      animation-timing-function: ease-out;
    }
    17% {
      opacity: 1
    }
    25% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="crossfade"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 1" alt="Image 1"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 2" alt="Image 2"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 3" alt="Image 2"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 4" alt="Image 4"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 5" alt="Image 5"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 6" alt="Image 6"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 7" alt="Image 7"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 8" alt="Image 8"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 9" alt="Image 9"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 10" alt="Image 10"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 11" alt="Image 11"&gt;
    &lt;img src="http://dummyimage.com/120x185&amp;text=Img 12" alt="Image 12"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>