在css sprites中使用动画gif是一个好习惯吗？

Question

我有一个带有动画图标的网站，当你将鼠标悬停在它们上面时（当它们没有时，我选择一个非动画图标进入精灵），它们是动画的.gif文件，这里是：

但我认为可能会导致浏览器性能不佳。我可以在精灵中放置动画图标，在另一个中放置动画图标，但重点是什么？以这种方式精灵停止有用。您是否建议使用一个脚本来为精灵中放置的图标设置动画？也许？ 你有什么建议？我需要一个良好的浏览器性能

Answer 1

不要猜，测试！说真的。只要动画gif具有合理的尺寸，我怀疑这将是一个大问题。但是，最好的方法是尝试一下。尝试使用Chrome或Safari的Web Inspector，通过各种策略（无动画，单独文件中的动画图标，一张图像中的所有内容）来分析页面加载时间，并查看哪种策略表现最佳。如果差别不大，请选择最简单的一个。如果性能成为问题，您可以随时更改它。

Answer 2

gif压缩格式是一个棘手的格式，因为所有的空格都不像jpg或png（按位）那样处理。然而，随着动画数量的增加和颜色数量的增加，gif格式将开始崩溃。你应该做的是根据精灵图像的大小测试各个大小。移动精灵的表现根本不应该是一个问题，但正如其他答案所说，你必须用不同的浏览器和外形来测试它。

Answer 3

自从万维网（www）开始以来，所有主要浏览器都支持动画GIF;二十年前。如果他们对那些不支持像Lynx这样的图形的人的任何现代浏览器摘录感兴趣，我会感到非常惊讶。

如果帧速率过高，您可能会遇到某些浏览器的问题，但对于您向我们展示的这些图标，情况显然不是这样。