我在 div 中有一个图像，使用

<div style="background-image: url(...);></div>

这是相当大的。

我想在背景图像中做一些运动。所以我想放大一点并做一些翻译，所以看起来图像移动了一点。

我想让它无限循环。

我尝试过使用动画.css https://daneden.github.io/animate.css/ with <div class="animated pulse infinite"></div>，但我不希望div移动，只希望div内的背景照片移动。脉冲效果也有点过分了。我只是想让它有一点动静。也许只是沿 x 方向向左平移，然后向右平移

Edit

我努力了

@keyframes animatedBackground {
  from {
    background-size: cover;
    background-position: 50% 22%;
  }
  to {
    background-size: cover;
    background-position: 100% 22%;
  }
}

但如果我使用它似乎不起作用background-size: cover?

Edit 2

我发现它确实有效，但宽度是100%，所以如果我使用它没有任何区别background-position: 50% 22%; or background-position: 100% 22%;，但如果我改变 y 方向，它确实有效:-D

但如果我将动画时间设置为超过 5 秒，它就会变得非常滞后。有什么办法可以避免延迟吗？

你可以只使用CSS3@keyframes动画化background-position, e.g.:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(http://placekitten.com/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

<div id="animate-area"></div>

See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations有关 CSS 动画的更多信息。