Почему моя анимация CSS3 так медленно работает в Chrome?

Question

Эта анимация в Google Chrome использует 50% ЦП!Как я могу его оптимизировать?

Фонов (PNG24 с прозрачностью) имеют размер 30 КБ и размер от 1440 до ~ 400 пикселей.

/* 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: удалите повтор-х и посмотрите результат
• Шаг 2: смените фоновое изображение на обычные, посмотрите результат
• Шаг 3: переход от положения к использованию преобразования translate3D, см. Влияние

CSS-анимация не самая дружественная к процессору, но она не должна быть такой плохой, как эта