Question

我正在使用css3动画制作网站，它在Safari和Firefox中运行完美，但出于某种原因，Chrome中的性能非常糟糕。（大约15 fps）

动画很简单，基本上是几个大圆圈分层。我还使用javascript添加了一些png sprite动画。

我知道硬件加速但我不认为这是问题，这似乎是Chrome独有的一些怪癖。 css动画单独执行'OK'但是一旦我添加sprite，性能下降很多。

    $.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和sprite进行动画制作时遇到了问题。

我已尝试过网上可以找到的所有内容，但如果有人有任何建议请告诉我。

我在Mac btw（17.0.963.93）

上使用最新的稳定铬

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

Answer 1

感谢回复人员，我认为这是某些版本的Chrome的一个问题，因为它在最新的金丝雀版本中非常完美。

我最终剥离了一些chrome的动画，优雅地回归到静态图像。

css3动画效果不佳（仅限Chrome）

1 个答案: