為什么JavaScript執行會影響FireFox中的CSS動畫和GIF動畫

Question

對我來說，有一個大問題總是在我異步加載數據（例如，帶有javascript的圖像）時出現。 過去，我放置了一個加載器來向用戶顯示某些正在進行中。 但是，在數據加載時，圖像無法正確設置動畫。 它一直在努力，但僅限於Firefox瀏覽器。

css3動畫（例如旋轉）也存在相同的問題。

為什么會這樣呢？

var imgUrl = 'http://photojournal.jpl.nasa.gov/jpeg/PIA13932.jpg';
var aImagesToLoad = [];
var iLoaded = 0;
var runs = 3;

$(document).on('click', 'a#init-load', function(event) {
    event.preventDefault();
    if (confirm('A big image is loaded three times now')) {
        var i, j;
        var self = $(this);

        self.fadeOut(500);  
        $('img').addClass('show');

        for ( i = 0; i < runs; i += 1) {
            var ts = new Date().getTime();

            aImagesToLoad.push(new Image());
            aImagesToLoad[aImagesToLoad.length - 1].onload = function(load) {
                iLoaded += 1;

                if (iLoaded === runs - 1) {
                    $('img').removeClass('show');
                    self.fadeIn(500);
                }
             };

             aImagesToLoad[aImagesToLoad.length - 1].src = imgUrl + '?uq=' + (ts + i);
         }
    }
});

用ajaxloader圖像（動畫gif）和CSS旋轉動畫制作了jsfiddle 。 在哪里可以測試。

Answer 1

您需要在樣式表中添加transalte3d（0,0,0） ，以便在硬件加速渲染中起作用 ：

例如嘗試：

transform: scale(1) rotate(359deg) translate3d(0,0,0.1);

translate3d（）屬性告訴瀏覽器使用硬件加速來使動畫更流暢

#css-ajaxloader {
    transform: scale(1) rotate(0deg) translate3d(0,0,0.1);
} 

我也默認指定比例，所以瀏覽器不會繼承任何其他比例..因為我們希望比例默認為默認值1 ..

如果瀏覽器支持，將Z添加到0.1將提高硬件加速

試試看