css - 如何循环具有多个关键帧定义的 css 动画？

Question

问题

我有两个在单个元素上运行的 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

Answer 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