长 CSS 动画缓动（背景位置）答案

【问题标题】：Long CSS animation easing (background-position)长 CSS 动画缓动（背景位置）
【发布时间】：2019-04-01 15:32:21
【问题描述】：

我正在尝试使用 CSS 在更长的时间内平滑地为背景图像位置设置动画，比如 60 秒：

#movingbackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg');
  overflow: hidden;
  background-position: left center;
  animation: zoomin 60s ease-in infinite;
}

@-webkit-keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}
@keyframes zoomin {
  0% { background-position: 0% center; transform: scale(1.0); }
  50% {background-position: 100% center; transform: scale(1.2); }
  100% { background-position: 0% center; transform: scale(1.0); }
}

&lt;div id="movingbackground"&gt;&lt;/div&gt;

开头和结尾的小动作是每秒“跳跃”几个像素，而不是缓慢移动（可能取决于屏幕尺寸）。

原因可能是没有足够的运动来填充所需的帧数，尤其是在动画缓动时。我想我已经在某个地方看到了这种效果，我想知道如何解决这个问题。

这里也是Fiddle。

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
linear 而不是 ease-in 可能是您正在寻找的内容

标签： css animation background-position easing

【解决方案1】：

background-position 的动画使浏览器能够进行布局、绘制和合成。
重新布局和重新绘制对 CPU 的负担很重，并导致“跳跃”。

您可以将背景应用于伪元素（或在 HTML 中使用 <img>）并使用 3d 转换为其 transform 属性设置动画。

这将使浏览器使用 GPU 来制作动画，并且动画在合成阶段会非常流畅地运行。

参见下面的 sn-p：

html,
body {
  margin: 0;
  padding: 0
}

#movingbackground {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#movingbackground:before {
  content: '';
  position: absolute;
  top: 0; left: 0; z-index: -1;
  height: 100%;
  width: 200%;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Bigsurflowers.jpg/1280px-Bigsurflowers.jpg) 0 50% / cover;
  animation: zoomin 60s ease-in infinite;
}

@keyframes zoomin {
  50% {
    transform: translateX(-50%) scale(1.2)
  }
}

&lt;div id="movingbackground"&gt;&lt;/div&gt;

【讨论】：

使用 background-position 的优点是即使在小的纵向屏幕上它也会将图片移动到最右边，并且在横向的大屏幕上不需要将图像缩放到 200% 宽度。我将尝试通过方向媒体查询或其他方式解决这个问题，然后回到这里。顺便说一句：我认为这不仅仅是 GPU 与 CPU，否则使用 translateZ 或将更改的图像也可以解决问题。我猜 transform 可以实现亚像素移动，而 background-position 不能。无论如何，它更好;-)
@user127091，感谢您的来信！你不必坚持200%，这只是一个例子。 translateZ 也不是“魔法药丸”——如果浏览器重新布局/重新绘制，它也无济于事。

【解决方案2】：

我做了一些测试，得出的结论是这可能不可能。（至少对于过渡或动画）

问题在于浏览器在屏幕上呈现图像的方式。图片的像素显然与屏幕的像素对齐。

所以图片总是一次“跳跃”一个像素。

这意味着，图像中的像素越多，执行的步骤就越多。但是当使用ease-in时，开始总是卡顿。

我想我已经在某处看到了这种效果的顺利进行

这可能没有用 css 实现。

【讨论】：