How would I apply my @keyframes animation to just my background?

Question

I have an advert container using grid and I've applied a @keyframes animation to it and it looks pretty cool! However, I'd like the image itself to move and not the text in the foreground.

At the moment I'm moving the entire container which is obviously what needs to change but I can't figure out where I need to go from here.

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>

brill. Still can't quite get it to achieve the same thing though. 0% { background-position: -100%; } 100% { background-position: 0%; } the image is out of place and then snaps back to my specified position in the advert class — Maximilian, Jan 01 '19 at 22:26
percentage value doesn't work like they do with translate, check this if you want to know the exact value to use : https://stackoverflow.com/a/51734530/8620333 — Temani Afif, Jan 01 '19 at 22:27

score 1 · Answer 1 · answered Jan 02 '19 at 05:20

You can do it like below, You need to use background position instead of transform translate, and you're done!

.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>

How would I apply my @keyframes animation to just my background?

1 Answers1