如何循环使用多个关键帧定义的 CSS 动画？

问题

我有两个 css 关键帧动画，它们在单个元素上运行：

.fade-bg {
  animation-name: fade-bg-1, fade-bg-2;
  animation-delay: 0, 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

动画定义如下：

@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  */ }

上面的方法有效，但是当它到达第二个动画时，它只会重复该动画并且不会循环回fade-bg-1.

我尝试了很多不同的组合animation-direction但无济于事。

问题

我怎样才能让动画返回到fade-bg-1并重演？

这个例子

EXAMPLE http://jsfiddle.net/qfwjg8k5/1/

如果没有 javascript，我认为你做不到。但是，您可以使用单个关键帧动画实现相同的效果。

.fade-bg {
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}


@keyframes fade-bg {
    0% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    25% {
        opacity: 1;
        background-image: url('image-1.jpg');
    }

    50% {
        opacity: 0;
        background-image: url('image-1.jpg');
    }

    51% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }

    75% {
        opacity: 1;
        background-image: url('image-2.jpg');
    }

    100% {
        opacity: 0;
        background-image: url('image-2.jpg');
    }
}

EXAMPLE http://jsfiddle.net/181wzf9w/2/