как сделать так, чтобы изображения автоматически накладывались друг на друга

Question

Я пытался сделать это какое-то время, но я не смог найти ничего на inte rnet. То, что я пытаюсь сделать, это иметь кучу изображений и отображать по одному за раз. Таким образом, изображение 1 исчезает в течение 2 секунд и исчезает, изображение 2 делает то же самое, затем изображение 3 et c. я пытаюсь осуществить это с css, я не хочу начинать прыгать в js, если не нужно. Код, который у меня есть, прекрасно работает, но с одной оговоркой: он запускается только один раз. Если я добавлю animation-iteration-count: infinite, все изображения начнут мигать одновременно! не могу понять это.

@keyframes bruh {

    0% {opacity: 1;}
    75% {opacity: 1;}
    100% {opacity: 0;}

}
 
.a1{
    position: relative;
    top: 10px;
    left: 10px;
    width:200px;
    opacity:0;
    animation-name: bruh;
    animation-duration: 2s;
    animation-delay: 0s;
    
    }
.a2{
    position: relative;
    top: 10px;
    left: 10px;
    width:200px;
    opacity:0;
    animation-name: bruh;
  
    animation-duration: 2s;
    animation-delay: 2s;
    }
.a3{
    position: relative;
    top: 10px;
    left: 10px;
    width:200px;
    opacity:0;
    animation-name: bruh;
    animation-duration: 2s;
    animation-delay: 4s;
    }
.a4{
    position: relative;
    
    top: 10px;
    left: 10px;
    width:200px;
    opacity:0;
    animation-name: bruh;
    animation-duration: 2s;
    animation-delay: 6s;
    }

<img src="IMG_4591.JPG" class = "a1">
   <img src="IMG_4594.JPG" class = "a2">
   <img src="seadoo icon.jpg" class = "a3">
   <img src="renken 1950.jpg" class = "a4">

Answer 1

Проблема заключается в задержке, которая запускается только один раз. Вам нужна функция, которая учитывает все l oop, в данном случае полные 8 секунд. Я скорректировал проценты примерно до go на вашем примере. (0-75-100).

 @keyframes pert {
  0% { opacity: 1; }
  19% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
 }

 [class^="a"] {
  position: relative;
  top: 10px;
  left: 10px;
  width: 200px;
  opacity: 0;
  animation-name: pert;
  animation-duration: 8s;
  animation-iteration-count: infinite;
 }

.a1 { animation-delay: 0s; }
.a2 { animation-delay: 2s; }
.a3 { animation-delay: 4s; }
.a4 { animation-delay: 6s; }

Answer 2

Я не думаю, что вы можете сделать это хорошо без JavaScript. Имейте в виду, что время зависит от количества изображений. Чем больше изображений, тем дольше каждое изображение должно ждать своего следующего хода.