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

Google Chrome中的动画使用50％的CPU！我怎样才能优化它？为什么我的CSS3动画的性能在Chrome中如此之慢？

背景（具有透明度的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。

来源

2012-02-09 Modest

你可以创建一个示例页面/小提琴吗？ – 2012-02-09 10:31:00

对不起，但我不能。我编辑了这个问题，并添加了示例。 – Modest 2012-02-09 10:42:57

我会类选这样的：

步骤1：删除重复-x和看到的影响
第2步：从背景图像切换到只是普通图像，请参阅影响
第3步：更改从位置到使用translate3D变换，看到的影响

CSS动画是不是最CPU友好，但他们不应该为

坏

来源

2012-02-10 01:25:03

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

回答

相关问题