在最近的趋势中，我看到人们使用JavaScript来动画化CSS sprites，而不是使用动画GIF？为什么不用动画GIF而不是动画CSS精灵？
例：
难道这只是为了展示或试验技术，或者是否有任何好处。如果有的话，我有兴趣知道这些好处。 我问的原因是，我无法弄清楚，在这两种情况下，我们需要生成中间帧（主要是使用补间技术）。
控制
你有超过GIF动画无法控制。你无法启动它们，你无法阻止它们。他们只要加载就会生成动画。
使用精灵，您可以控制动画。您可以启动，停止并响应浏览器事件，平移动画。例如，Google Doodle通常会在您点击它们时激活。
一个漂亮的GIF控制系统可以在9gag中找到。您可以通过将它们附加到DOM来启动它们，并通过删除它们并用预先生成的“第一帧视图”交换它们来停止它们。但就GIF而言。
独立实例
当你加载相同GIF的多个实例，这些实例使用跨页和移动相同的图像在同一时间。如果你有一排跳舞的独角兽GIF，他们会同时跳舞。同步跳舞！
但是对于精灵来说，即使您使用的是相同的图像，动画依赖于底层脚本。因此，如果一个精灵由一个脚本动画，另一个由另一个脚本动画，则两个动画可以独立运行，并且彼此不同。
这样可以节省您创建其他GIF的难度，并且修改起来很简单，因为您只需更改脚本。
确保流畅的动画
动画GIF动画只是在加载时，当网络很慢，直到更多的图像被载入动画冻结。
相比之下，精灵的优势在于您可以预加载它们，确保所有图像都事先加载。这可以确保用于该动画的资源在动画之前已经加载，以确保动画尽可能平滑。
但是，GIF仍然是图像。您可以将它们动态加载到DOM上，并在将它们附加到DOM之前监听加载事件。
部分呈现
随着PNG精灵，你可以在做动画“的谐音”，打破动画场景的零件。例如，当一个角色静止时，但手臂在挥手。您不需要为整个角色或整个场景制作动画。您可以将描绘角色身体的精灵的元素放置在“冻结”状态，而手臂是一个与动画不同的元素。这节省了精灵表的空间和大小。 Google的2012年母亲节涂鸦就是一个很好的例子。
相比之下，大部分时间为，GIF动画中的每一帧都是整个图像，并且动画化它是否有任何动作移动。帧越多，GIF的尺寸就越大。
的GIF只是不扩展
的GIF注定的图标。与PNG和JPG相比，GIF中的文件大小与图像大小的比例不会很好地扩大。
你说的是GIF格式的大约每帧是图像ISN” t 100％正确。 GIF格式允许使用各种背景清除选项进行部分帧更新。 – 2012-10-17 00:37:45
在约瑟梦者的答案的顶部...
据我所知，或至少它曾经是，GIF文件不是真正的颜色，另一个原因使用JPG格式/ PNG图片作为一个CSS精灵。
这里的苹果是如何做到的iPhone 5的页面上好的击穿 - https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI – 2012-10-16 23:46:29