改进CSS3背景位置动画'；s的表现

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

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

.wrapper{
宽度：960px；
高度：140像素；
边缘顶部：80px；
位置：相对位置；
}
.内容：以前{
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
-webkit转换来源：50%50%0；
-ms变换原点：50%50%0；
变换原点：50%50%0；
v-webkit动画名称：sideupscroll；
动画名称：sideupscroll；
/*动画持续时间*/
-webkit动画制作持续时间：80s；
动画制作时间：80s；
/*动画计时功能*/
-webkit动画计时功能：线性；
动画计时功能：线性；
/*动画迭代计数*/
-webkit动画迭代计数：无限；
动画迭代次数：无限；
背景：url（“http://i.imgur.com/wNna7D3.png）重复固定0 0靛蓝；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
/*狩猎与铬*/
@-webkit关键帧sideupscroll{
0% {
背景位置：0；
}
50% {
背景职位：-50%-100%；
}
100% {
背景位置：-100%-200%；
}
}
@关键帧sideupscroll{
0% {
背景位置：0；
}
50% {
背景职位：-50%-100%；
}
100% {
背景位置：-100%-200%；
}
}

原因 为元素的

背景位置

设置动画总是需要大量的资源，而且在几乎所有浏览器中都很有可能导致动画效果不佳。这是因为，更改

背景位置

会导致在所有浏览器中重新绘制+合成（+也会导致在Webkit中重新布局）。由于需要执行如此多的成本高昂的操作，结果总是滞后的

有问题的代码片段：

下面的代码片段与您的小提琴相同（没有供应商前缀）。在启用“ShowPaint Rects”选项后，运行此代码段并使用Chrome开发工具进行检查。您将在元素顶部看到一个红色或绿色的颜色框（这是绘制矩形），并且该框将在动画的整个过程中持续闪烁或保持彩色。这表明重绘经常发生，因此会影响性能

在Firefox中，可以通过在

about:config

页面中启用

nglayout.debug.paint\u flash

来查看绘制矩形（将其设置为true）

.wrapper{
宽度：960px；
高度：140像素；
边缘顶部：80px；
位置：相对位置；
}
.内容：以前{
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
内容：“；
变换：translateZ（0）；
变换原点：50%50%0；
动画名称：sideupscroll；
动画制作时间：80s；
动画计时功能：线性；
动画迭代次数：无限；
背景：url（“http://i.imgur.com/wNna7D3.png）重复固定0 0靛蓝；
动画填充模式：两者都有；
}
@关键帧sideupscroll{
0% {
背景位置：0；
}
50% {
背景职位：-50%-100%；
}
100% {
背景位置：-100%-200%；
}
}

我从中学到了很多。非常感谢你抽出时间告诉我区别。我不知道。但这甚至可以为div中的内容设置动画。有没有办法只为背景设置动画？@SumeetDarade：将您的内容放在一个单独的

div

或伪元素中，而不是

.content

div，并使用定位使它们彼此重叠。谢谢。效果很好。但我使用的是缩放而不是平移。这在chrome和mozilla中效果很好，但在edge/IE中效果不好。首先，我使用backkground位置设置动画，它在mozilla和IE/edge中效果很好。但在铬合金上没有任何提示？这个问题也适用于定位，顶部，左侧。