Question

我正在尝试在3个元素之间循环播放css3动画，在第3个元素结束后，我想重新启动动画，依此类推...

这是我的代码：

    .oferta-prods.run-animation img{
        animation-name:fadeIn;
        animation-duration:4s;
        animation-timing-function:ease-in-out;
        opacity:0;
    }
    .oferta-prods.run-animation img:nth-child(1){animation-delay:0s;}
    .oferta-prods.run-animation img:nth-child(2){animation-delay:4s;}
    .oferta-prods.run-animation img:nth-child(3){animation-delay:8s;}
    @keyframes fadeIn{
        0%{
            opacity:0;
        }
        10%{
            opacity:1;
        }
        90%{
            opacity:1;
        }
        100%{
            opacity:0;
        }
    }

<div class="oferta-prods run-animation">
         <img src="assets/House.svg">
         <img src="assets/Car.svg">
         <img src="assets/Beach.svg">
    </div>

因此，想法是，元素1开始动画然后结束，元素2开始动画然后结束，然后元素3开始动画然后结束。之后，我要在3个元素结束动画之后自动开始新的循环。

谢谢

Answer 1

您可以通过定义3个具有不同执行计时器的不同动画来实现此目的。在下面的编码示例中，我们将100％/ 3除以，得出的结果约为33％，这意味着每个图像都应以动画总时间的33％运行动画。

看看这个例子：

ody {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
}

.animation-wrapper div {
  width: 20px;
  height: 50px;
  margin: 10px;
}

.animation-wrapper .anim-1 {
  background-color: red;
  animation: animation1 4s infinite ease-in-out;
}

.animation-wrapper .anim-2 {
  background-color: blue;
  animation: animation2 4s infinite ease-in-out;
}

.animation-wrapper .anim-3 {
  background-color: green;
  animation: animation3 4s infinite ease-in-out;
}

@keyframes animation1{
    0%{
        transform: translateX(0);
    }   
    
    16.5%{
        transform: translateX(20px);
    }

    33%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(0);
    }
}


@keyframes animation2{
    0%{
        transform: translateX(0);
    }

    33%{
        transform: translateX(0);
    }

    49.5%{
        transform: translateX(20px);
    }

    66%{
        transform: translateX(0);
    }
    
    100%{
        transform: translateX(0);
    }
}

@keyframes animation3{
    0%{
        transform: translateX(0);
    }
   
    66%{
        transform: translateX(0);
    }

    82.5%{
        transform: translateX(20px);
    }

    99%{
        transform: translateX(0);
    }
    
    100%{
        transform: translateX(0);
    }
}

    <div class="animation-wrapper">
        <div class="anim-1"></div>
        <div class="anim-2"></div>
        <div class="anim-3"></div>
    </div>

Answer 2

一种方法是使用Javascript restart the animation。它涉及触发DOM重排，因此在繁重的页面上可能不是最好的方法。

const lastImage = document.querySelector(".oferta-prods.run-animation img:nth-child(3)");
lastImage.addEventListener("animationend", () => {
  lastImage.parentNode.classList.remove("run-animation");
  void lastImage.offsetWidth; // trigger DOM reflow
  lastImage.parentNode.classList.add("run-animation");
});

.oferta-prods.run-animation img {
  animation: 4s ease-in-out fadeIn;
  opacity: 0;
}

.oferta-prods.run-animation img:nth-child(1) { animation-delay: 0s; }
.oferta-prods.run-animation img:nth-child(2) { animation-delay: 4s; }
.oferta-prods.run-animation img:nth-child(3) { animation-delay: 8s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {opacity: 0; }
}

<div class="oferta-prods run-animation">
  <img src="assets/House.svg">
  <img src="assets/Car.svg">
  <img src="assets/Beach.svg">
</div>

循环播放CSS3动画

2 个答案: