css - 为 CSS sprite 中包含的小图像制作动画是否与仅为该图像制作动画一样有效？

Question

我即将检查我的 CSS 并将图像编译成精灵，我想知道什么是最有效的方法。目前，我有一堆微小的、~10x10 像素的图像需要进行动画处理。我想知道是否将这些图像添加到尺寸更大（~1000x1000px）的精灵中，然后对它们进行动画处理会导致 CPU 负载/性能的任何差异。这是动画小 div 或动画只有一小部分（指定的背景位置）可见的巨型 div 之间的区别。

Answer 1

最好为精灵设置动画。

对所有图像的 1 个服务器请求，一旦缓存它就没有问题。

我要注意的是您打算放入的动画效果的数量，因为做太多可能会导致运行缓慢（特别是 css3 3d 变换）。

你有没有想过使用canvas动画而不是容器 div？

Answer 2

即使您只是交换类名，动画 GIF 的处理级别也比 JavaScript 低。动画 GIF 不会受到垃圾收集延迟的影响，并且开销更少。

在精灵上使用动画 GIF。无论如何，文件大小不会有太大差异。