javascript - アニメーション GIF CSS の背景が常に表示されない

Question

アニメーション GIF を表示する必要があるため、CSS 背景としてスタイル設定しますが、常に表示されるわけではありません。

( . ポラロイド ) をピンチインすると、 ( .poaroid) の高さをスケーリングします。現在、スケールが 0.42 以下の場合に、このアニメーション gif プーフ アニメーションをトリガーしようとしています。言い換えれば、ピンチにより、ポラロイドが元のサイズの 42% 以下になった場合です。

したがって、マルチタッチ デバイスで次の URL にアクセスすると: https://googledrive.com/host/0BwJVaMrY8QdcTW9BMHg4b0lPUDA/index.html

次に、ポラロイド カード (.polaroid) をつまむと、小さくなり、十分に小さくなり、 に置き換えられますが、アニメーションは常に発生するわけではありません。なぜだめですか？

これが私のjsです：

function transform(e){
    var cssScale = "scaleY("+ scaleFactor +")";
    element.css({
        webkitTransform: cssScale,
        webkitTransformOrigin: cssOrigin,
        transform: cssScale,
        transformOrigin: cssOrigin,
    });
    if(scaleFactor <= 0.42){
        $(element).replaceWith('<div class="poof"></div>');
        $('.poof').css('height', itsHeight).css('width', itsWidth).css('background', 'transparent url(poof.gif?v='+time+') center no-repeat');
        time++;
        setTimeout(function(){
            $('.poof').remove();
        }, 1500);
    }
}

<div class="poof"></div>ポラロイドが 42% 以下に縮小されている場合は、ポラロイドが置き換えられます。ただし、 jQuery が毎回それを css 背景として書き込んでも、その背景 (プーフのアニメーション gif) が毎回表示されるわけではありません。