如何使用多个关键帧定义循环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.

我尝试了许多不同的动画方向组合,但无济于事.

问题

如何使动画返回到fade-bg-1并重复自身？

这个例子

EXAMPLE

解决方法

没有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

原文地址：https://www.jb51.cc/css/215778.html