如何使用Javascript在页面上优化多个图像的动画？

Question

这是我的jsFiddle。我将图像加载到DOM中，然后使用旋转插件和一些CSS动画它们。我有两个问题：

1：我让代码将'top'css值重置为负数，然后继续将它们增加1，所以看起来雪花从屏幕顶部掉落。对于某些雪花，这可行，但其他只是出现在页面的某个位置。

2：我拥有的雪花越多，我的CPU就越难。我知道在DOM中使用图像并不是最好的方法，但我已经尝试将图像放在HTML5 Canvas的不同图层中，但情况更糟。也许有一种替代方法可以将它们放在不同的画布层中？

任何想法都表示赞赏。我想把它打包成一个小的jQuery插件，但截至目前，如果我无法解决这个问题，就不会发生这种情况。

由于

Answer 1

我认为你的.each和setInterval的组合是个问题。不是为每个薄片创建一个计时器，而是在一个计时器上移动它们。