如何循环具有多个关键帧定义的 CSS 动画？答案

【问题标题】：How do I loop a css animation with multiple keyframe definitions?如何循环具有多个关键帧定义的 CSS 动画？
【发布时间】：2023-03-20 20:54:01
【问题描述】：

问题

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

【问题讨论】：

我为此添加了a bug for the CSS animation spec。
LMAO 你的问题是我的解决方案 XD，好吧，我想要一些东西淡入然后在循环动画 2 时留在屏幕上，但我想它应该能够做到这一点。谢谢:)

标签： css animation css-animations

【解决方案1】：

我不确定仅使用 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。

【讨论】：

我应该指出我不想为此使用 javascript。谢谢。
啊，好吧。好吧，我很确定这是不可能的，但我们会看看其他人是否能想出办法。

【解决方案2】：

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

【讨论】：

太棒了！为什么它不能按预期使用多个动画？
这并不能真正回答问题，但只要没有其他人提供更好的 CSS 唯一答案，我就会接受你的。谢谢！

【解决方案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');
  }
}

&lt;div class="animation--fade-bg animation--fade-bg-1"&gt;&lt;/div&gt;

【讨论】：