Не работает background-repeat-Y при animation

Question

Подскажите пожалуйста, почему отключается background-repeat: repeat-Y, когда я добавляю анимацию? При этом когда убираю анимацию, то картинка по оси Y бесконечная. Как можно это исправить? Буду очень благодарен любой помощи

css:

@keyframes motionYUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.banner-bg {
  position: relative;
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: 1083px;
    background-image: url("https://i.imgur.com/wR4VVCh.png");
    background-repeat: repeat-y;
    background-position: 851px 0;
    animation: motionYUp 5s linear infinite;
  }
}

html:

<div class="content">
    <header class="banner-bg">
    </header>
</div>

Ссылка на сам проект: https://github.com/Fa4stik/web-technologies-2022-2/tree/lesson6

Answer 1

Потому что translate двигает весь блок, а не только фон. Сместите блок – выше или ниже изображению неоткуда взяться. Если хотите двигать фон, изменяйте background-position:

@keyframes motionYUp {
  from {
    background-position: calc(50% - 50px) 0;
    /*transform: translateY(0); */
  }
  to {
    background-position: calc(50% - 50px) 100%;
    /*transform: translateY(100%);*/
  }
}

.banner-bg {
  height: 500px;
  position: relative;
  overflow: hidden;
}

.banner-bg:before {
  content: "";
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  height: 1083px;
  background-image: url("https://i.imgur.com/wR4VVCh.png");
  background-repeat: repeat-y;
  background-position: calc(50% - 50px) 0;
  animation: motionYUp 5s linear infinite;
}

<div class="content">
  <header class="banner-bg">
  </header>
</div>

БЛОГ НА HUSL

Не работает background-repeat-Y при animation

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