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/