title: How do I loop a css animation with multiple keyframe definitions?
body: <h2>The Issue</h2>
  
  <p>I have two css keyframe animations which I am running on a single element:</p>
  
  <pre><code>.fade-bg {
    animation-name: fade-bg-1, fade-bg-2;
    animation-delay: 0, 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  </code></pre>
  
  <p>The animations are defined as such:</p>
  
  <pre><code>@keyframes fade-bg-1 {
  
    from {
        opacity: 0;
        background-image: url(image-1.jpg);
    }
  
    50% {
        opacity: 1;
        background-image: url(image-1.jpg);
    }
  
    to {
        opacity: 0;
        background-image: url(image-1.jpg);
    }
  
  }
  
  @keyframes fade-bg-2 { /* Same as fade-bg-1 only with image-2.jpg  */ }
  </code></pre>
  
  <p>The above works but when it gets to the second animation, it keeps repeating only that animation and does not loop back to <code>fade-bg-1</code>.</p>
  
  <p>I've tried many different combinations of <code>animation-direction</code> but to no avail.</p>
  
  <h2>The Question</h2>
  
  <p>How do I make it so that the animation returns to <code>fade-bg-1</code> and repeats itself?</p>
  
  <h2>The Example</h2>
  
  <p><kbd><a href="http://jsfiddle.net/qfwjg8k5/1/">EXAMPLE</a></kbd></p>