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

Answer 2

我不确定只用css是否可行，但如果你巧妙地在JS中设置一个setInterval方法，你可以通过将类分成两个来模拟同样的事情。

var index = 1;

function switchBackground() {
   if (index == 1) {
      //this switches to  the first background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-1";
      index = 0;
   }
   else {
      //this switches to  the second background
      var div = document.getElementById("yourDiv");
      div.className = "fade-bg-2";
      index = 1;
   }
}

setInterval(switchBackground(), 6000);

.fade-bg-1和.fade-bg-2是两个动画类。

如果您想玩它，可以使用jsfiddle。

Answer 3

大约6年前，我问了这个问题，已经有了很大的变化，但纯CSS并没有真正的解决方案。

我能想到的最接近的方法是使用伪元素将第二个动画应用到其中。

可能的解决方案：

使用类似::after的伪元素，然后将第二个动画应用于它。

代码：

.animation--fade-bg, .animation--fade-bg::after {
  width: 500px;
  height: 500px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

 .animation--fade-bg::after {
  content: "";
  display: block;

  animation-direction: reverse;
}

.animation--fade-bg-1 {
  animation-name: fade-bg-1;

}

.animation--fade-bg::after {
  animation-name: fade-bg-2;
}


@keyframes fade-bg-1 {
  from {
    opacity: 0;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }
    
  50% {
    opacity: 1;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }   
     
  to {
    opacity: 0;
    background-image: url('http://i.imgur.com/sRnvs0K.jpg');
  }
}

@keyframes fade-bg-2 {
  from {
    opacity: 0;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }

  50% {
    opacity: 1;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }

  to {
    opacity: 0;
    background-image: url('http://i.imgur.com/wL4RT1w.jpg');
  }
}

<div class="animation--fade-bg animation--fade-bg-1"></div>

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

问题

问题

示例

3 个答案:

可能的解决方案：

代码：