我在一個使用css3動畫的網站上工作，它在Safari和Firefox上運行得很好，但由于某些原因，在Chrome上的性能很糟糕。(大約15幀/秒)

http://triple-tested.com/animations/

動畫非常簡單，基本上是幾個大圓圈層疊在一起。我還使用javascript添加了一些png精靈動畫。

我知道硬件加速，但我不認為這是問題所在，這似乎是Chrome獨有的一些怪癖。css動畫單獨運行“還可以”,但是一旦我添加了精靈，性能就會下降很多。

$.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 btw上使用的是最新穩定的chrome(17 . 0 . 963 . 93)

順便說一句，你可以在這里看到css(使用較少) http://triple-tested.com/animations/css/style.less

感謝各位的回復，我認為這是某些版本的chrome的問題，因為它在最新的金絲雀版本中工作得很完美。

我最終為chrome剝離了一些動畫，優雅地退回到靜態圖像。

眾所周知，Chrome在同步過渡方面存在問題。一件可能有幫助的事情是啟用硬件加速，例如，將改變:轉換；讓chrome us GPU進行渲染過渡。

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