CSS3动画性能差（仅限Chrome）

Question

我正在制作一个使用css3动画的网站，在Safari和Firefox中运行得非常完美，但是在Chrome中性能非常差（约15 fps）。这些动画非常简单，基本上是一些大圆形叠加而成。我还使用javascript添加了几个png精灵动画。我知道硬件加速，但我不认为这是问题所在，似乎是Chrome独有的一些怪癖。CSS动画单独执行时表现良好，但一旦添加精灵，性能就会显著下降。请参考http://triple-tested.com/animations/。

    $.fn.spriteme = function(options) {
        var settings = $.extend({ framerate: 30 }, options);        

        return this.each(function(){
            var $el =  $(this),
                    curframe = 0,
                    width = settings.width,
                    fr = 1000/settings.framerate;


            (function animloop(){
                if(curframe == settings.frames) { curframe = 0; }   
                $el.css('background-position', (curframe*width)*-1  + 'px center');
                curframe++;
                setTimeout( animloop, fr );
            })();       
        });     
    };

这是我编写的用于动画精灵的代码，但正如我所说的，在Safari和Firefox中表现完美，因此我认为这不是问题。Chrome似乎在同时使用CSS和精灵进行动画处理时存在问题。

我尝试了我能在网上找到的一切，但如果有人有任何建议，请告诉我。

顺便说一下，我正在使用最新的Mac稳定版Chrome（17.0.963.93）。

你可以在这里看到CSS（使用less） http://triple-tested.com/animations/css/style.less

- michael

---

你的页面上有CSS阴影吗？我注意到当重新绘制阴影时，Chrome倾向于运行异常缓慢。 - danwellman

不，没有阴影。它基本上是四到五个圆形图像旋转。 - michael

好看的动画！我试着用18.<something> (beta)版本，但还是有点卡顿。你可能需要将这个问题提交到他们的跟踪器上，看看开发人员有什么建议。请访问http://code.google.com/p/chromium/issues。 - Juho Vepsäläinen

非常酷的动画。在Chrome Canary（v.19）中性能并不那么糟糕。 - Connor

我可以确认，在Opera 11.51中的性能低于15帧每秒，我的硬件配置是Intel Core i5，3GHz，8Gb内存和集成显卡，我不认为这与硬件加速有任何关系，很可能是浏览器实现问题。 - Bud Damyanov

Answer 1

感谢大家的回复，我认为这是某些chrome版本的问题，因为它在最新的canary构建中完美运行。

最终我在chrome上削减了一些动画效果，优雅地回退到静态图像。

- michael

Answer 2

Chrome因同时进行过渡而出现问题而闻名。一个可能有帮助的方法是启用硬件加速，例如使用will-change: transform;来让Chrome使用GPU来渲染过渡效果。

.smooth-transition {
    transition: all 0.3s ease-out;
    will-change: transform;
}

- F.H.