Как бы я применил свою анимацию @keyframes только к своему фону? - PullRequest
Новая
       42

Как бы я применил свою анимацию @keyframes только к своему фону?

0 голосов
/ 02 января 2019

У меня есть рекламный контейнер, использующий сетку, и я применил к нему анимацию @keyframes, и она выглядит довольно круто!Однако мне бы хотелось, чтобы само изображение двигалось, а не текст на переднем плане.

В данный момент я перемещаю весь контейнер, который, очевидно, должен быть изменен, но я не могу понять, гдеМне нужно идти отсюда. 

advert {
  grid-area: advert;
  background-image: url(./mi-vr-5.jpg);
  background-position-x: 50%;
  background-position-y: 50%;
  background-size: 1000px;
}

.righttoleft {
  animation-name: righttoleft;
  animation-duration: 3s;
}

@keyframes righttoleft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
<advert class="righttoleft">
  <div class="title-shift">
    <h1 class="title">bla bla bla</h1>
    <h3 class="title-shift-h3">bla bla bla</h3>
    <p class="title-shift-h3">bla bla bla.</p>
  </div>
</advert>

1 Ответ

0 голосов
/ 02 января 2019

Вы можете сделать это, как показано ниже. Вам нужно использовать фоновую позицию вместо transform translate, и все готово! 

.righttoleft {
  -moz-animation: righttoleft 3s infinite alternate;
  -o-animation: righttoleft 3s infinite alternate;
  -webkit-animation: righttoleft 3s infinite alternate;
  animation: righttoleft 3s infinite alternate;
  grid-area: advert;
  background-image: linear-gradient(to right, red, yellow);
  background-position: 0% 0%;
  background-size: 1000px;
  float: left;
  width: 100%;
}

@keyframes righttoleft {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
<advert class="righttoleft">
  <div class="title-shift">
    <h1 class="title">bla bla bla</h1>
    <h3 class="title-shift-h3">bla bla bla</h3>
    <p class="title-shift-h3">bla bla bla.</p>
  </div>
</advert>
...