css - 提高 CSS3 背景位置动画的性能

Question

我正在尝试改进 CSS3 动画，因为当前代码似乎导致了一些 CPU 负载过高并且浏览器似乎很慢。

我能做什么？我有所有供应商前缀等。我不确定我是否可以改进代码或重构它以将其用作最佳代码实践。

Fiddle Demo

.wrapper {
  width: 960px;
  height: 140px;
  margin-top: 80px;
  position: relative;
}
.content:before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  v -webkit-animation-name: sideupscroll;
  animation-name: sideupscroll;
  /*animation-duration*/
  -webkit-animation-duration: 80s;
  animation-duration: 80s;
  /*animation-timing-function*/
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  /*animation-iteration-count*/
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: url("http://i.imgur.com/wNna7D3.png") repeat fixed 0 0 indigo;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* Safari and Chrome */
@-webkit-keyframes sideupscroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -50% -100%;
  }
  100% {
    background-position: -100% -200%;
  }
}
@keyframes sideupscroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -50% -100%;
  }
  100% {
    background-position: -100% -200%;
  }
}

<div class="wrapper">
  <div class="content"></div>
</div>

Answer 1

原因

为元素的 background-position 设置动画总是会占用大量资源，并且很可能在几乎所有浏览器中导致动画延迟。这是因为，对 background-position 的更改会导致重绘 + 所有浏览器中的组合(+ 它还会导致 Webkit 中的重新布局)。由于需要执行如此多的代价高昂的操作，结果总是滞后的。

有问题的片段:

以下代码段与您的 fiddle 相同(没有供应商前缀)。启用“Show Paint Rects”选项后，运行此代码段并使用 Chrome Dev 工具对其进行检查。您会在元素顶部看到一个红色或绿色的颜色框(这是绘画矩形)，并且该框将不断闪烁或在整个动画持续时间内保持颜色。它表明重绘经常发生，因此会影响性能。

在 Firefox 中，可以通过在 about:config 页面中启用 nglayout.debug.paint_flashing(将其设置为 true)来查看 paint rects。

.wrapper {
  width: 960px;
  height: 140px;
  margin-top: 80px;
  position: relative;
}
.content:before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transform: translateZ(0);
  transform-origin: 50% 50% 0;
  animation-name: sideupscroll;
  animation-duration: 80s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background: url("http://i.imgur.com/wNna7D3.png") repeat fixed 0 0 indigo;
  animation-fill-mode: both;
}
@keyframes sideupscroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -50% -100%;
  }
  100% {
    background-position: -100% -200%;
  }
}

<div class="wrapper">
  <div class="content"></div>
</div>

---

解决方案

最好避免动画化 background-* 属性(所有这些都是视觉属性)并使用 transform 等属性。使用 transform 可以至少在 Blink (Chrome) 和 EdgeHTML 中产生更好的性能，因为 Blink 仅进行重新组合，而 EdgeHTML 仅触发重新布局第一次(动画中的第一次更新)。

没有问题的代码段:(或者至少对 Blink 和 EdgeHTML 的性能影响要小得多)

下面的代码片段使用 transform 属性(translateX 和 translateY)来实现与您预期的输出非常相似(但不相同) ).如果您使用开发工具检查此片段，您会看到绿色框(绘制矩形)仅在动画开始时出现一次。发布后，浏览器只执行合成，因此性能要好得多。

.wrapper {
  width: 960px;
  height: 140px;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.content:before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200%;
  height: 400%;
  content: "";
  background: url("http://i.imgur.com/wNna7D3.png") 0 0 indigo;
  background-repeat: repeat;
}
.content {
  position: relative;
  height: 100%;
  width: 100%;
  animation-name: sideupscroll;
  animation-duration: 80s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes sideupscroll {
  0% {
    transform: translateX(0%) translateY(0%);
  }
  50% {
    transform: translateX(-50%) translateY(-100%);
  }
  100% {
    transform: translateX(-100%) translateY(-200%);
  }
}

<div class="wrapper">
  <div class="content"></div>
</div>

Gecko 和 Webkit 怎么样？

不幸的是，在撰写本文时，还没有针对使用这些渲染引擎的浏览器的解决方案。唯一的选择似乎是减少 animation-duration。动画持续时间的减少意味着没有。所需的重新绘制 + 重新布局 + 重新合成周期更少，因此动画性能更好。

以下代码片段在 Firefox 中看起来不那么滞后，因为持续时间仅为 20 秒。

.wrapper {
  width: 960px;
  height: 140px;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.content:before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 200%;
  height: 400%;
  content: "";
  background: url("http://i.imgur.com/wNna7D3.png") 0 0 indigo;
  background-repeat: repeat;
}
.content {
  position: relative;
  height: 100%;
  width: 100%;
  animation-name: sideupscroll;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes sideupscroll {
  0% {
    transform: translateX(0%) translateY(0%);
  }
  50% {
    transform: translateX(-50%) translateY(-100%);
  }
  100% {
    transform: translateX(-100%) translateY(-200%);
  }
}

<div class="wrapper">
  <div class="content"></div>
</div>

有用的链接:

• CSS Triggers - 列出哪些属性会触发哪些操作。
• HTML5 Rocks - Accelerated Rendering in Chrome - 解释加速渲染在 Chrome 中是如何工作的(以及如何启用“Show Paint Rects”选项)

Note: As I had already stated above, the animation is not 100% the same as what you had in question but in my opinion this is about the closest you could get.