Loop a CSS3 animation - css

Question

I'm trying to loop a css3 animation between 3 elements, after the 3rd element ends, I want to restart the animation and so on...
Here's my code:
.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>
So, the idea is, element 1 starts animation then ends, element 2 starts animation then ends, then element 3 starts animation then ends. After this, I want to automatically begin a new cycle after the 3 elements end the animation.
Thank you

Answer 1

You can do this by defining 3 diferent animations with different execution timers.
Following my coding example bellow, we divide 100% / 3, and that gives us around 33%, meaning, that every image should run the animation for 33% of the animation total time.
Take a look at this example:
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

One way is to use Javascript to restart the animation. It involves triggering a DOM reflow, so it may not be the best way on a heavy page.
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>