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

Posted 2023-03-06

【中文标题】如何循环具有多个关键帧定义的 CSS 动画？

【英文标题】：How do I loop a css animation with multiple keyframe definitions?

【发布时间】：2014-10-12 14:33:29

【问题描述】：

问题

我有两个在单个元素上运行的 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 时留在屏幕上，但我想它应该能够做到这一点。谢谢:)

【参考方案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');
  

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