在最近的趋势中，我看到人们使用 JavaScript 而不是动画 GIF 来制作 CSS sprite 动画？
例如：
这只是为了展示或试验技术，还是从中获得任何好处。我有兴趣知道好处，如果有的话。 我问的原因是我无法弄清楚，因为在这两种情况下我们都需要生成中间帧（主要使用补间技术）。
【问题讨论】：
标签： javascript animation css-sprites animated-gif
控制
您无法控制 GIF 动画。你无法启动它们，也无法阻止它们。他们只是在加载后立即制作动画。
使用精灵，您可以控制动画。您可以启动、停止和响应浏览器事件，平移动画。例如，Google Doodles 通常会在您单击它们时激活。
9gag 中有一个漂亮的 GIF 控制系统。您可以通过将它们附加到 DOM 来启动它们，并通过删除它们并使用预先生成的“第一帧视图”交换它们来停止它们。但这只是 GIF 的范围。
独立实例
当您加载同一个 GIF 的多个实例时，所有这些实例都会在页面上使用同一个图像并同时移动。如果你有一排跳舞的独角兽 GIF，它们会同时跳舞。花样跳舞！
但是对于精灵，即使您使用相同的图像，动画也依赖于底层脚本。因此，如果一个 sprite 由一个脚本制作动画，而另一个 sprite 由另一个脚本制作动画，则这两个动画可以独立运行，并且彼此不同。
这使您无需创建另一个 GIF，而且由于您只是更改脚本，因此很容易修改。
确保流畅的动画
动画 GIF 仅在加载时进行动画处理，当互联网速度较慢时，动画会冻结，直到加载更多图像。
相比之下，精灵的优点是您可以预先加载它们，确保预先加载所有图像。这可确保用于该动画的资源在动画之前已加载，以确保其动画尽可能流畅。
但是，GIF 是静止图像。您可以从 DOM 中动态加载它们并在将它们附加到 DOM 之前侦听加载事件。
部分渲染
使用 PNG sprite，您可以在动画中制作“部分”，将动画场景分解为部分。例如，当一个角色静止不动，但手臂在挥动时。您不需要为整个角色或整个场景设置动画。您可以将描绘角色身体精灵的元素置于“冻结”状态，而手臂是不同的动画元素。这节省了精灵表的空间和大小。 2012 年 Google 的母亲节涂鸦就是一个很好的例子。
相比之下，大多数时候，GIF 动画中的每一帧都是完整的图像，并且无论其中的任何内容是否移动都会产生动画效果。帧数越多，GIF 的大小就越大。
GIF 无法缩放
GIF 用于图标。与 PNG 和 JPG 相比，GIF 的文件大小与图像大小的比例并没有那么好。
【讨论】：
除了梦想家约瑟夫的回答...
据我所知，或者至少过去是这样，GIF 文件不是真彩色，这是使用 JPG/PNG 作为 css sprite 的另一个原因。
【讨论】：