为什么不GIF动画，而不是动画CSS精灵？(Why not animated GIF instead

在最近的趋势，我使用JavaScript，而不是使用GIF动画人看到CSS动画的精灵？

例如：

http://www.google.com/doodles/eadweard-j-muybridges-182nd-birthday （事实上，谷歌用于其他涂鸦这种技术太）
https://everyme.com/ （ '我'的标志）
还有很多...

是所有只是为了显示或技术实验还是有出它的任何好处。我米有兴趣了解的好处，如果有。 我自寻的原因是，我无法弄清楚在我们需要生成中间帧（大多采用渐变技术）两种情况。

Answer 1:

控制
你有过GIF动画无法控制。你不能启动它们，你不能阻止他们。他们只是一旦他们加载动画。
有了精灵，你可以控制动画。您可以启动，停止和响应浏览器事件，过场动画平移。例如，当你点击它们谷歌涂鸦通常激活。
一个漂亮的GIF控制系统可以在9GAG找到。您可以通过将附加到DOM启动它们，并删除它们，并与预先生成的“第一画面浏览”交换他们阻止他们。但是，这是尽可能的GIF去。
独立实例
当你加载相同GIF的多个实例，这些实例使用跨页和移动相同的图像在同一时间。如果你有跳舞的GIF独角兽一排，他们会在同一时间跳舞。同步跳舞！
但随着精灵，即使你使用的是相同的图像，动画依赖于底层脚本。所以，如果一个精灵是由另一个脚本一个脚本和另一个动画，动画都可以从彼此独立运行，并以不同。
这从创建另一个GIF节省你可以很容易地修改，因为只更改了脚本。
确保流畅的动画效果
动画GIF动画只是在加载时，当网络很慢，直到更多的图像被载入动画冻结。
相比之下，精灵的优点是你可以预先加载它们，确保所有图像加载事前。这可以确保用于该动画的资源已经加载动画之前，以确保它动画尽可能平滑。
然而，GIF格式的静态图像。您可以动态加载它们关闭DOM和监听负载情况下，您添加他们的DOM之前。
部分呈现
随着PNG精灵，你可以在做动画“的谐音”，打破动画场景的零件。例如，当一个字符静止不动，但手臂挥舞着。你不需要动画整个字符，或者整个场景。您可以将描绘一个“冻结”状态，角色身体的精灵，而武器是被动画不同元素的元素。这节省精灵片的空间和尺寸。这方面的一个很好的例子是2012年的母亲节涂鸦由谷歌。
相比之下， 大多数的时候 ，一个GIF动画每一帧是整个图像，动画以及是否没有什么在它移动。的帧数越多，则该GIF的尺寸更大。
GIF图像只是不扩展
GIF格式注定的图标。文件大小的图像尺寸比例与PNG和JPG相比不GIF文件扩展那么好。

Answer 2: