如何在 css3/jquery 中实现图像的流畅'rain'？

Question

在我的网站上，我想添加一个关于我们业务的冷静/积极的facebook反应的动画流。你可以在这里看到我的第一次尝试：https://dl.dropboxusercontent.com/u/809252/css3%20animation.mov

到目前为止，我不太好的方法是：创建一个包含所有反应的2000x4000 png（文件大小为+3mb->bad）。并在循环中设置背景位置的动画。

什么能更顺利地解决这个问题？一个不必加载3mb图像的解决方案。或者任何在特定网站上发现类似效果的人？

谢谢！

Answer 1

除了文件大小问题外，如此大的图像可能会在某些浏览器上造成问题，尤其是在图像尺寸最大的iPad上（有关详细信息，请参阅apple文档）。

最好将它们分割成单独的图像，并在它们变得可见之前预加载它们。

您可以将它们inline-block定位在非常宽的div中，并使用懒惰加载程序插件（或自己编写）。

Answer 2

所以。。。。我喜欢图像方法，原因有几个。首先，您只需要为单个元素（图像）设置动画，这将比在html中渲染多个框更快/更平滑。

[奖金]如果你希望这些消息是动态的（即，这样你就不必自己创建图像），你可以创建一个特殊的页面来渲染消息，然后将PhantomJS指向它，自动生成一个PNG。。。这就引出了另一点：

您应该使用PNG作为图像格式。它应该大大缩小图像的大小——也许更像100-500KB，而不是3MB。

为了实现流畅的动画，你不应该使用基于JS的动画（即jQuery的传统方法），而应该使用CSS3，并做一些魔术来触发硬件加速。例如，以下CSS3代码片段通常会触发所选元素上的硬件加速：

#myElemToAnimate {
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}