最近我看到越来越多的人使用JavaScript动画CSS精灵而不是使用动画GIF？
例如：
这只是为了展示或试验技术吗？还是其中有任何好处？如果有的话，我很感兴趣了解它们。 我之所以问是因为在两种情况下我们都需要生成中间帧（通常使用缓动技术）。
控制
您无法控制动态GIF。您无法启动它们，也无法停止它们。一旦加载，它们就会开始动画。
使用Sprites，您可以控制动画。您可以启动、停止和响应浏览器事件，通过动画进行滚动。例如，谷歌涂鸦通常在您单击它们时激活。
在 9gag 中可以找到一个巧妙的GIF控制系统。您可以通过将它们附加到DOM中来启动它们，并通过删除它们并与预先生成的“第一帧视图”交换来停止它们。但是这就是GIF的全部。
独立实例
当您加载多个相同GIF的实例时，所有这些实例都在页面上使用相同的图像并同时移动。如果您有一行跳舞的独角兽GIF，则它们将同时跳舞。同步跳舞！
但是对于Sprites，即使您使用相同的图像，动画也依赖于底层脚本。因此，如果一个Sprite由一个脚本动画，而另一个由另一个脚本动画，则两个动画可以独立运行，并且彼此不同。
这使您免于创建另一个GIF，并且很容易修改，因为您只需要更改脚本。
确保平稳动画
动态GIF仅在加载时动画，当互联网速度较慢时，动画会冻结，直到加载更多的图像。
相比之下，Sprites的优势在于您可以预先加载它们，确保所有图像都提前加载。这确保用于该动画的资源已在动画之前加载，以确保它尽可能顺畅地进行动画。
但是，GIF仍然是静态图像。您可以从DOM中动态加载它们，并侦听加载事件，然后将它们附加到DOM中。
部分渲染
使用 PNG 精灵图，您可以在动画中进行“局部化”，将动画场景分成几个部分。例如，当角色静止不动时，但是手臂在挥舞。您不需要对整个角色或整个场景进行动画处理。您可以在一个元素中放置描绘角色身体精灵的图像，该图像处于“冻结”状态，而手臂则是另一个正在动画处理的元素。这样可以节省精灵表格的空间和大小。Google 2012年母亲节Doodle就是很好的例子。
相比之下，“大多数情况下”，GIF 动画中的每帧都是完整图像，并且无论其中的任何内容是否移动都会进行动画处理。帧数越多，GIF 的文件大小就越大。
GIF 图片不能扩展
GIFs 只适合制作图标。与 PNG 和 JPG 相比，GIF 的文件大小与图像尺寸的比例并不适合扩展使用。
在Joseph the Dreamer的回答之上...
据我所知，或者至少曾经是这样，GIF文件不是真彩色，这也是使用JPG / PNG作为css sprite的另一个原因。
