Safari（移動+桌面）分組CSS關鍵幀動畫

Question

我在使用Safari創建模仿羽毛漂浮的氣泡的效果時遇到麻煩。 我已經省略了一些代碼來掌握要點。 正在進行的工作的網址在這里 。

這是動畫對象的Webkit樣式。

@-webkit-keyframes f1 {
  100% {
    -webkit-transform: translateX(-25px) translateY(-350px); 
  } 
}

.feather {
  /* other styling omitted */
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
}

和JavaScript來創建一堆對象。

animateFeathers = function() {
    var $feather = $('<img>'),
    $feather.addClass('feather animated');
    $feather.attr('src','img/feather.png');
    $feather.css('-webkit-animation-name','f1');
    $featherContainer.append($feather);

    setTimeout(function() {
        $feather.remove();
    }, 9000);

    // random time to create next feather
    var rTimeout = Math.random() * maxTime + minTime;
    setTimeout(animateFeathers, rTimeout);
}

如果您訪問Chrome或Firefox中的鏈接 ，則會看到預期的效果。 但是，在Safari（再次，移動或台式機）中，羽毛會堆疊，並且每7秒僅在一組中進行動畫處理。 我希望他們在插入DOM后立即開始動畫制作。 有什么想法嗎？

Answer 1

我不得不使用畫布，因為我確實無法在Safari上獲得出色的性能。 花了幾個小時，但它的工作原理是：

http://poetreatapp.com/