在最近的趋势中，我看到人们使用JavaScript而不是使用动画GIF动画CSS精灵？
前：
这只是为了展示或试验技术还是有任何好处。我有兴趣了解它的好处，如果有的话。 我问的原因是我无法弄清楚在两种情况下我们都需要生成中间帧（主要是使用补间技术）。
答案 0 :(得分：35)
<强>控制
您无法控制动画GIF。你无法启动它们，你无法阻止它们。它们只要加载就会生成动画。
使用精灵，您可以控制动画。您可以启动，停止和响应浏览器事件，平移动画。例如，Google Doodles通常会在您点击它们时激活。
9gag中可以找到一个漂亮的GIF控制系统。您可以通过将它们附加到DOM来启动它们，并通过删除它们并使用预先生成的“第一帧视图”交换它们来停止它们。但这就像GIF一样。
独立实例
当您加载同一GIF的多个实例时，所有这些实例在整个页面中使用相同的图像并同时移动。如果你有一排舞蹈独角兽GIF，他们会在同一时间跳舞。同步跳舞！
但是对于精灵，即使您使用相同的图像，动画依赖于底层脚本。因此，如果一个精灵由一个脚本激活而另一个精灵由另一个脚本激活，则两个动画可以独立运行，并且彼此不同。
这样您就不会创建另一个GIF，而且只需更改脚本就可以轻松修改。
确保动画流畅
动画GIF在加载时只是动画，当互联网速度很慢时，动画会冻结，直到更多的图像被加载。
相比之下，精灵的优势在于您可以预先加载它们，确保预先加载所有图像。这样可以确保在动画之前已经加载了用于该动画的资源，以确保动画尽可能平滑。
然而，GIF仍然是图像。您可以在将它们附加到DOM之前动态加载它们并监听加载事件。
部分呈现
使用PNG精灵，你可以在动画中做“局部”，将动画场景分解为部分。例如，当一个角色静止不动时，手臂正在挥动。您无需为整个角色或整个场景设置动画。您可以将描绘角色身体精灵的元素置于“冻结”状态，而手臂则是动画的不同元素。这节省了精灵表的空间和大小。一个很好的例子就是2012年的母亲节涂鸦。
相比之下，大部分时间，GIF动画中的每一帧都是整个图像，并动画显示其中的任何内容是否移动。帧数越多，GIF的大小就越大。
GIF只是不缩放
GIF用于图标。与PNG和JPG相比，GIF中文件大小与图像大小的比例不能很好地扩展。
答案 1 :(得分：3)
在约瑟夫梦想家的回答之上...
据我所知，或者至少它曾经是那样，GIF文件不是真正的颜色，是使用JPG / PNG作为css精灵的另一个原因。