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

【问题标题】：Is animating a small image contained in a CSS sprite as efficient as animating just that image?为 CSS sprite 中包含的小图像制作动画是否与仅为该图像制作动画一样有效？
【发布时间】：2012-07-30 14:23:04
【问题描述】：

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

【问题讨论】：

标签： css performance image load sprite

【解决方案1】：

最好是动画精灵。

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

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

你有没有想过使用canvas 代替容器 div 来制作动画？

【讨论】：

我还没有研究过任何画布的东西......该项目是浏览器中的电子书，包含大量动画图像。我正在使用 CSS 转换。

【解决方案2】：

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

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

【讨论】：

好主意 - 但仅在您负担得起使用 .gif 的情况下才有效