Css动画-动画缓慢且抖动

Question

我想问，这个CSS代码出了什么问题？它用于设置背景图像的动画-缩放效果。

@media (min-width: 1000px) {
  .anim-on {
    background-size: 110% 110%;
    background-position: center center;
    animation: shrink 12s infinite alternate;
  }
  .anim-out {
    background-size: 120% 120%;
    background-position: center center;
    animation: small 6s infinite alternate;
  }
  @keyframes shrink {
    0% {
      background-size: 110% 110%;
    }
    100% {
      background-size: 100% 100%;
    }
  }
  @keyframes small {
    0% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 110% 110%;
    }
  }
}

这段代码产生了很好的效果，但我看到，在速度较慢的机器上，效果很差。

怎么了？或者也许有人有更好的想法，如何用更好的技术创造这种效果？

Answer 1

背景大小是一个视觉属性，因此对其值的任何更改都会导致重新绘制。喷漆是一项非常昂贵的操作，势必会对低端机器的性能产生影响。克服这一问题的一种方法是使用CSS transform（精确地说是缩放）而不是background-size更改来生成动画。

会对性能造成影响的代码段：

下面的片段使用了与问题中相同的动画。当你运行这个片段并使用Chrome Dev工具检查它时（通过启用"显示绘制矩形"选项），你会看到两个图像都有一个与它们相关的绘制矩形（绿色或红色框），并且在动画发生时，框一直在闪烁（或保持原样）。这表明重新绘制经常发生，因此会影响性能。

.anim-on,
.anim-out {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on {
  background-size: 110% 110%;
  background-position: center center;
  animation: shrink 12s infinite alternate;
}
.anim-out {
  background-size: 120% 120%;
  background-position: center center;
  animation: small 6s infinite alternate;
}
@keyframes shrink {
  0% {
    background-size: 110% 110%;
  }
  100% {
    background-size: 100% 100%;
  }
}
@keyframes small {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 110% 110%;
  }
}
/* Just for demo */
div {
  float: left;
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>

---

对性能影响较小的代码段：

在下面的片段中，我将background-image添加到一个伪元素中，然后对其使用scale变换来产生放大/缩小效果。父对象的overflow: hidden设置可防止动画影响其大小。如果你用Chrome开发工具检查一下，你会发现绿色或红色的框在页面加载并离开时只出现一次。这表明在动画本身过程中没有发生进一步的重新绘制，因此从性能的角度来看效果更好。您还会注意到，此动画比前一个更平滑。

.anim-on,
.anim-out {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.anim-on:after,
.anim-out:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background: url(http://lorempixel.com/200/200/nature/1);
}
.anim-on:after {
  animation: shrink 12s infinite alternate;
}
.anim-out:after {
  animation: small 6s infinite alternate;
}
@keyframes shrink {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes small {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
/* Just for demo */
div {
  float: left;
  margin-right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='anim-on'></div>
<div class='anim-out'></div>

您可以在CSS触发器网站中找到有关各种CSS属性的更多信息，以及对其值的更改将如何影响渲染过程。

您可以在以下文章/网站中找到有关渲染过程以及使用transform（而不是其他一些属性）如何提高性能的更多信息：

• HTML5 Rocks-Chrome加速渲染
• Chrome中的GPU加速合成
• 谷歌开发者-渲染性能

Answer 2

我编辑了Henry代码，现在css是可重用的，所以用户可以通过CMS将背景图像添加到元素中，剩下的由css代码完成：

.anim {
 position: relative;
 height: 100vh;
 width: 100%;
 overflow: hidden;
 **background-size: 0px!important;**
}
.anim:after {
position: absolute;
content: '';
 height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 background-size: cover !important;
 **background: inherit;**
 z-index: -1;
}
.anim:after {
animation: shrink 12s infinite alternate;
 }
@keyframes shrink {
0% {
transform: scale(1.1);
}
 100% {
transform: scale(1);
}
}
@keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
<section class="anim" style="background: url('images/1.png');"></section>

谢谢*：）