爲什麼我的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中如此之慢？

回答

相關問題