我有一些设置为在悬停时动画的图标（因此每个图标有两个图像，一个是静态PNG，另一个是GIF动画）。由于图标旨在响应，因此我在每个img-fluid元素上使用Bootstrap的img类。
在Chrome中，静态图像和动画版本均可正确显示-边缘平滑且抗锯齿。但是，在Firefox和Chrome中，动画GIF显得像素化，我不知道为什么。这仅仅是由于每个浏览器如何呈现调整大小的图像，还是我可以解决它？
Codepen sample here-将鼠标悬停在每个图标上以查看会发生什么。在Firefox和Edge中，平滑边缘的静态PNG和像素化的GIF之间存在明显的跳跃。在Chrome中不会发生这种情况。
如果有关系，我的每个浏览器版本是：
非常感谢帮助。