Пропадает background в анимации

Question

Всем привет! Пытаюсь сделать эффект волн на css. Но возникает проблема. Background-image просто пропадает, если это так можно назвать. Заметил, что пропадает, когда картинка доходит до конца своего размера (width). Делал по видосу, у чела все прекрасно работает, а у меня в утиль... Как это исправить?

body {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  /*background: linear-gradient(120deg, white 50%, black 50%);*/
  /*background: white;*/
  overflow: hidden;
}

.wave {
  width: 100%;
  height: 100px;
  background-image: url(https://picsum.photos/2000/100);
  position: absolute;
  bottom: 0;
  left: 0;
  /*left: 185px;*/
  /*top: 90px;*/
  /*rotate: -60deg;*/
  background-size: 2000px 100px;
}

.wave1 {
  animation: anim 30s ease-in-out infinite;
}

.wave2 {
  animation: anim 25s ease-in-out infinite;
  opacity: .1;
}

.wave3 {
  animation: anim2 20s ease-in-out infinite;
  opacity: .5;
}

.wave4 {
  animation: anim2 35s ease-in-out infinite;
  opacity: .8;
}

@keyframes anim {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 2000px;
  }
}

@keyframes anim2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2000px;
  }
}

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

Answer 1

Такие простые изображения лучше делать через SVG, чтобы не тащить растровую картинку.

body {
  margin: 0;
  padding: 0;
}

section {
  position: relative;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: radial-gradient(circle closest-side at 70% 30%, #dda 50%, #112 60%);
}

.wave {
  position: absolute;
  bottom: 0; left: 0;
  height: 10vmax; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 970 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90c65 0 106-63 155-62s69 45 114 44S345-2 422 0s102 69 151 68 75-45 111-45 69 51 100 51 53-30 79-29 52 45 107 45H0Z' fill='%23aee'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  opacity: .2;
}
.wave1 {
  background-size: 100vmax 100%;
  animation: anim 35s ease-in-out infinite;
}
.wave2 {
  background-size: 100vmax 95%;
  animation: anim2 30s ease-in-out infinite;
}
.wave3 {
  background-size: 100vmax 85%;
  animation: anim 25s ease-in-out infinite;
}
.wave4 {
  background-size: 100vmax 70%;
  animation: anim2 20s ease-in-out infinite;
}

@keyframes anim {
  0%, 100% { background-position-x: 0; }
  50% { background-position-x: 100vmax; }
}
@keyframes anim2 {
  0%, 100% { background-position-x: 100vmax; }
  50% { background-position-x: 0; }
}

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

БЛОГ НА HUSL

Пропадает background в анимации

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