Как настроить анимацию?

Question

SeRGaN_87 @SeRGaN_87

Анимация

Как настроить анимацию?

Доброе утро, хочу сделать один проект на основе Animated Background Image Loop Animation (это когда из множества "плиток" делается одно целое изображение) ,но у меня получается множество изображений (не одно), у этого товарища получается : https://www.youtube.com/watch?v=abo0x86sQb4 , качал исходный код отсюда: https://codingbd.com/animated-background-image-loo..., уже несколько часов мучаюсь, ничего не выходит. Пожалуйста подскажите,что не так.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <link rel="stylesheet" href="/Test/css/style.css">
</head>
<body>
    <section>
        <h2>Coding bd</h2>
        <div class="banner">
            <div class="blocks"></div>
        </div>
    </section>
    <script>
        const banner = document.getElementsByClassName('banner')[0];
        const blocks = document.getElementsByClassName('blocks');

        for (var i = 1; i < 400; i++){
            banner.innerHTML += "<div class='blocks'></div>";
            blocks[i].style.animationDelay = `${i * 0.05}s` 
        }
    </script>
</body>
</html>

//------------------------------------------------------------------------------//

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #333333;
}

section h2 {
  position: relative;
  width: 100%;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  font-size: 10vw;
  color: #ffffff;
}

.banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.blocks {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  animation: animated 0.75s ease-in-out forwards;
  
}
.blocks:nth-child(even) {
  animation: animated 1s ease-in-out forwards;
  
}

@keyframes animated {
  0% {
      opacity: 0;
      transform: scale(0) translateY(1000px);
  }
  50% {
      opacity: 1;
      background: url('https://abc-decor.com/img/gallery/46/thumbs/thumb_l_27247.jpg');
      background-position: center;
      background-attachment: fixed;
      background-repeat:no-repeat;
      background-size:cover;
  }
  100% {
      opacity: 1;
      transform: scale(1) translateY(0px);
      background: url('https://abc-decor.com/img/gallery/46/thumbs/thumb_l_27247.jpg');
      background-position: center;
      background-attachment: fixed;
      background-repeat:no-repeat;
      background-size:cover;
}
}