0

Подскажите пожалуйста, почему отключается 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

2
  • 1
    Загрузите картинку на какой-то хостинг, а сюда добавте работающий код. С html. Тогда можна будет разобраться. Так не понятно. 3 янв в 16:54
  • Загрузил картинку на хостинг + добавил ссылку на репо, спасибо
    – Fa4stik
    3 янв в 17:19

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.