2

Есть следующий код, надо сделать так, чтобы фон циклично прокручивался по вертикали без швоф.

.bg {
  -moz-animation: bg 5s linear infinite;
  -webkit-animation: bg 5s linear infinite;
  -ms-animation: bg 5s linear infinite;
  animation: bg 5s linear infinite;
  background: url("https://cdn.pixabay.com/photo/2014/04/05/11/39/rain-316580_960_720.jpg") bottom left;
  background-repeat: repeat-y;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  background-size: cover;
  width: 100%;
}

@keyframes bg {
    0% {
      -moz-transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }

    100% {
      -moz-transform: translate3d(0,1920px,0);
      -webkit-transform: translate3d(0,1920px,0);
      -ms-transform: translate3d(0,1920px,0);
      transform: translate3d(0,1920px,0);
    }
  }
<div class="bg"></div>

1 ответ 1

4

Мы должны аннимировать background-position

body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100vh;
}

#bg {
    width: 100%;
    height: 100%;
    background: url('https://mobilegamegraphics.com/wp-content/uploads/2015/06/Untitled-3.jpg') repeat-y;
    background-size:100% 50%;
    animation: changewidth linear 5s infinite;
}

@keyframes changewidth {
    from { background-position-y: 0; }
    to { background-position-y: -100%}
}
<div id="bg"></div>

2
  • здесь более человечный пример : codepen.io/topicstarter/pen/oqzjpv
    – user33274
    16 мар 2018 в 16:04
  • скажу больше что анимирование background-position работает ни везде
    – user33274
    16 мар 2018 в 16:05

Ваш ответ

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

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