Поочередный вывод на экран нескольких картинок с определенной задержкой

Question

Возникла проблема поочередного появления картинок на экран после загрузки страницы.

Всего 8 картинок. Если с первыми тремя, что-то происходит, то остальные на экране появляются, но пустые. Первые две картинки вроде бы появляются правильно.

* {
  outline: 1px solid red; //Это красные полосы
}

.container {
  padding: 10px 80px;
  width: 100%;
  margin: 0 auto;
  max-width: 1064px;
}

.image-stack::after {
    content: ' ';
    display: table;
    clear: both;
  }

.kar_L {
  float: left;
  z-index: 3;
}

.karaspryg {
  float: left;
  z-index: 3;
}

.kar_1 {
  float: left;
  z-index: 3;
}

.karasik {
  float: left;
  z-index: 3;
}

.kar_2 {
  float: left;
  z-index: 3;
}

.kar_L2 {
  float: left;
  z-index: 3;
}

.kar_3 {
  float: left;
  z-index: 3;
}

.kar_L3 {
  float: left;
  z-index: 3;
}

.kar_4 {
  float: left;
  z-index: 3;
}


.kar_L {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: 1em;
  left: -20em;
  animation: KarLAnimation 1s 1s forwards;
  visibility: hidden;
}
@keyframes KarLAnimation {
  to {
    visibility: visible;
  }
}

.karaspryg {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: 1em;
  left: 15em;
  animation: KarLAnimation 1s 3s forwards; forwards;
  visibility: hidden;
}
@keyframes KarasprygAnimation {
  to {
    visibility: visible;
  }
}

.kar_1 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: -3em;
  margin-left: 30em;
  animation: Kar1Animation 1s 5s forwards;
  visibility: hidden;
}
@keyframes Kar1Animation {
  to {
    visibility: visible;
  }
}

.karasik {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: -7em;
  left: 42em;
  animation: KarasikAnimation 1s 7s forwards;
  visibility: hidden;
}
@keyframes KarasikAnimation {
  to {
    visibility: visible;
  }
}

.kar_2 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: -2em;
  left: -20em;
  animation: Kar2Animation 1s 9s forwards;
  visibility: hidden;
}
@keyframes Kar2Animation {
  to {
    visibility: visible;
  }
}

.kar_L2 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.8);
  position: relative;
  margin-top: -3em;
  left: -22em;
  animation: KarL2Animation 1s 11s forwards;
  visibility: hidden;
}
@keyframes KarL2Animation {
  to {
    visibility: visible;
  }
}

.kar_3 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.5);
  position: relative;
  top: -6em;
  margin-left: 32em;
  animation: Kar3Animation 1s 13s forwards;
  visibility: hidden;
}
@keyframes Kar3Animation {
  to {
    visibility: visible;
  }
}

.kar_L3 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.7);
  position: relative;
  top: -10em;
  margin-left: 45em;
  animation: KarL3Animation 1s 15s forwards;
  visibility: hidden;
}
@keyframes KarL3Animation {
  to {
    visibility: visible;
  }
}

.kar_4 {
  grid-row: 1;
  grid-column: 1;
  transform: scale(0.6);
  position: relative;
  margin-top: 14em;
  margin-left: 27em;
  animation: Kar4Animation 1s 18s forwards;
  visibility: hidden;
}
@keyframes Kar4Animation {
  to {
    visibility: visible;
  }
}

<div class="container">
  <div class="image-stack">

    <div class="karaspryg">
      <img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
    </div>

    <div class="kar_L">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_1">
      <img src="https://habrastorage.org/webt/s_/yk/eo/s_ykeof0f15-dy2gci5evfp-oeo.gif" alt="">
    </div>

    <div class="karasik">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_2">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_L2">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_3">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_L3">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>

    <div class="kar_4">
      <img src="https://habrastorage.org/webt/q2/pg/ff/q2pgffqkmgkcpwwbify5cd6mvoq.gif" alt="">
    </div>
  </div>

Пробовал тестировать в Codepen, но не получается как мне надо.

Answer 1

Сделал так, вроде бы работает. Если кто-то может предложить лучшее. Жду новые варианты.

const img = document.querySelector('img');
const cycleImages = ["https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
                     
"https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif",
  "https://habrastorage.org/webt/iw/87/lj/iw87ljatinzbklz1mtjpwhihk3a.gif",
  "https://habrastorage.org/webt/ht/af/rx/htafrx4d1sye7mcs_-udymicfng.gif"
]

async function cycle() {
  img.src = cycleImages[0];
   img.style = 'position: absolute; top: 10px; left: 20px;'
  await new Promise(r => setTimeout(r, 2000));
  img.src = cycleImages[1];
  img.style = 'position: absolute; top: 100px; left: 200px;'
  await new Promise(r => setTimeout(r, 2500));
  img.src = cycleImages[2];
   img.style = 'position: absolute; top: 100px; left: 20px;'
  await new Promise(r => setTimeout(r, 5000));
  img.src = cycleImages[3];
   img.style = 'position: absolute; top: 100px; left: 150px;'
  await new Promise(r => setTimeout(r, 2500)); 
}
cycle();

<img>

БЛОГ НА HUSL

Поочередный вывод на экран нескольких картинок с определенной задержкой

Ответы (1 шт):