Safari（移动 + 桌面）分组 CSS 关键帧动画答案

【问题标题】：Safari (mobile + desktop) grouping CSS Keyframe AnimationsSafari（移动 + 桌面）分组 CSS 关键帧动画
【发布时间】：2013-03-08 11:30:33
【问题描述】：

我在使用 Safari 创建模拟漂浮在空中的气泡的效果时遇到问题，但羽毛除外。我省略了一些代码来了解事情的要点。正在进行的工作的网址是here。

这是我的动画对象的 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 中访问 link，您将看到预期的效果。然而，在 Safari（同样是移动设备或桌面）中，羽毛会堆叠，并且每 7 秒才会在一组中进行动画处理。我希望它们在插入 DOM 后立即开始动画。对此有何想法？

【问题讨论】：

标签： css safari transform css-transitions webkit-transform

【解决方案1】：

不得不求助于使用画布，因为我真的无法在 Safari 上获得性能。花了好几个小时，但它的工作：

http://poetreatapp.com/

【讨论】：