Why my CSS3 animation's perfonrmance so slow in Chrome? - google-chrome

Question

This animation in Google Chrome uses 50% CPU! How can I optimize it?
Backgrouds (PNG24 with transparency) are 30KB and the size of 1440px to ~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;
}
Classes .animatedClouds1 and .animatedClouds2 have a length of the browser window.
I can't create a sample page but the same problem I saw here http://goo.gl/lNB0D.

Answer 1

I would triage this:
Step 1: Remove the repeat-x and see the impact
Step 2: Change from background image to just regular images, see the impact
Step 3: Change from position to using a translate3D transform, see the impact
CSS Animations aren't the most CPU friendly, but they shouldn't be as bad as that