javascript - Divs show() 在不同的时间，但相关的 CSS 动画都在相同的时间轴上运行。适用于 Chrome 和 IE，不适用于 FF

Question

试图让多个 div float 起来，就像一个无限大的气球效果。

Div 每隔几秒出现一次，它们的相关 CSS 动画应该在时间轴的开头开始。我让它在 Chrome v34 和 IE v10 中运行，但 Firefox v29 的所有 CSS 动画都在同一时间轴上运行(因此新的 div 在动画中开始)。

很难解释，所以请查看示例 http://codepen.io/anon/pen/miguo

注意:所有的 div 都使用相同的类和动画类，所以我尝试为每个 div 提供一个唯一的 id 和一个唯一的动画，但仍然有同样的错误。

非常感谢，快 catch 最后期限了，我应该去度假了:P

Answer 1

找到解决方案:通过向元素添加新类来启动动画。

 $(divs).addClass('floating-animation');

这是一个更新版本 http://codepen.io/anon/pen/tIhDq

在 Chrome v34、IE v10 和 Firefox v29 上测试