Изменить изображение с css и анимировать его

Question

Ниже мой код. Я реализовал волнообразный эффект на изображении, когда страница загружается, но не может решить мою другую проблему.

Проблема - я хочу менять изображение каждые 3 se c и добавьте волнообразную анимацию при загрузке изображения. У меня есть три изображения, и я хочу бесконечно l oop между ними.

Ссылка - https://codepen.io/354erytu/pen/OJVNYKQ

.wave {
  position: absolute;
  top: calc((100% - 30px)/2);
  left: calc((100% - 30px)/2);
  width: 30px;
  height: 30px;
  background: url('https://c4.wallpaperflare.com/wallpaper/755/29/195/chun-lo-tiger-japanese-art-samurai-demon-hd-wallpaper-thumb.jpg');
  background-attachment: fixed;
  background-position: center center;
}

.wave0 {
  z-index: 2;
  background-size: auto 106%;
  animation: w 1s forwards;
}

.wave1 {
  z-index: 3;
  background-size: auto 102%;
  animation: w 1s .2s forwards;
}

.wave2 {
  z-index: 4;
  background-size: auto 104%;
  animation: w 1s .4s forwards;
}

.wave3 {
  z-index: 5;
  background-size: auto 101%;
  animation: w 1s .5s forwards;
}

.wave4 {
  z-index: 6;
  background-size: auto 102%;
  animation: w 1s .8s forwards;
}

.wave5 {
  z-index: 7;
  background-size: auto 100%;
  animation: w 1s 1s forwards;
}

@keyframes w {
  0% {
    top: calc((100% - 30px)/2);
    left: calc((100% - 30px)/2);
    width: 30px;
    height: 30px;
  }
  100% {
    top: calc((100% - 300px)/2);
    left: calc((100% - 300px)/2);
    width: 300px;
    height: 300px;
  }
}

<div class="wave wave5"></div>
<div class="wave wave4"></div>
<div class="wave wave3"></div>
<div class="wave wave2"></div>
<div class="wave wave1"></div>
<div class="wave wave0"></div>

Answer 1

Ваш синтаксис ключевого кадра должен быть точно таким, а не 0% и 100%, и попытайтесь скопировать этот и модифицировать его, потому что, если вы измените НИЧЕГО в способе установки наград и скобок, он не будет работать. Вы можете добавить или удалить столько свойств, сколько хотите анимировать:

@keyframes walk-east{from{background-position:0px 0px;}
to{background-position:1764px 0px;}
}

Это должно работать так, никогда раньше не видел его с 0% и 100% за пределами похвалы, но он всегда работал без них , За исключением случаев, когда вы перемещаете скобки на одну позицию влево или вправо, чтобы он выглядел чище, он больше не будет работать. Это очень пристальное внимание к позициям скобок и похвал. Я не могу сделать это без копирования того, что уже сделано по некоторым причинам ...

Answer 2

В этом случае CSS будет недостаточно, если вы хотите менять изображение каждые 3 с. Можно использовать CSS спрайтов, однако вы используете ссылки на изображения, так что эта опция исчезнет. Если бы я был тобой, я бы go с решением JS, потому что это довольно просто. Вы можете прочитать больше о том, как реализовать это через JS в этой теме - Как мне изменять фоновое изображение каждые X секунд?