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

【问题标题】：Why my CSS3 animation's perfonrmance so slow in Chrome?为什么我的 CSS3 动画在 Chrome 中的表现如此缓慢？
【发布时间】：2012-03-01 19:42:30
【问题描述】：

Google Chrome 中的这个动画使用了 50% 的 CPU！如何优化它？

背景（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 看到了同样的问题。

【问题讨论】：

你能创建一个示例页面/小提琴吗？
对不起，我不能。我编辑了问题并添加了示例。

标签： google-chrome animation css

【解决方案1】：

我会对此进行分类：

第 1 步：删除 repeat-x 并查看效果
第 2 步：将背景图片改为普通图片，看看效果
第 3 步：从位置更改为使用 translate3D 变换，看看效果

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

【讨论】：