Question

我有一个使用网格的广告容器，并且向其应用了@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>

Answer 1

您可以按照以下方式进行操作，您需要使用背景位置而不是变换平移，就可以了！

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

如何将@keyframes动画仅应用于背景？

1 个答案: