Question

Google Chrome中的此动画使用50％的CPU！我该如何优化呢？

Backgrouds（透明度为PNG24）为30KB，大小为1440px至~400px。

/* animation */

.animatedClouds1 {
    background:
        url('img/clouds1.png') repeat-x 0 20px;
}

.animatedClouds3 {
    background:
        url('img/clouds3.png') repeat-x 0 250px;
}

@-webkit-keyframes wind1  {
         0% {background-position:0px 20px;}
        100% {background-position:1440px 20px;}
}

@-webkit-keyframes wind3  {
         0% {background-position:0px 250px;}
        100% {background-position:1440px 250px;}
}

.animatedClouds1
{
    -webkit-animation: wind1 80s linear infinite;
    -moz-animation: wind1 80s linear infinite;
    animation: wind1 80s linear infinite;
}

.animatedClouds3
{
    -webkit-animation: wind3 160s linear infinite;
    -moz-animation: wind3 160s linear infinite;
    animation: wind3 160s linear infinite;
}

类.animatedClouds1和.animatedClouds2具有浏览器窗口的长度。

我无法创建示例页面，但我在此处看到了同样的问题http://goo.gl/lNB0D。

Answer 1

我会对此进行分类：

步骤1：删除repeat-x并查看影响
第2步：从背景图像更改为常规图像，查看影响
步骤3：从位置更改为使用translate3D转换，请参阅影响

CSS动画不是最友好的CPU，但它们不应该那么糟糕

为什么我的CSS3动画在Chrome中的表现如此之慢？

1 个答案: