html - 动画时图像变得丑陋(CSS3 过渡)

Question

自从新版本的 Firefox(Mac OS 10.9.2 上的 29.0.1)以来，我发现我的 CSS 转换效果不佳。例如，如果我为图像的不透明度设置动画，在过渡期间，它会非常模糊。

以下代码显示了我使用的动画。

a img {
    opacity: 0.8;
    transition: all 0.2s ease;
}

a:hover img {
    opacity: 1;
}

我试过添加下面的代码，但是并没有解决问题

a:hover img{
    opacity : 1;
    transform : translate3d(0,0,0);
}

http://ansoine.isondev.com/nav_test.html

这是一张图片，显示了发生的模糊效果

Answer 1

可以稍微改善的一件事是删除图标属性的“透明”属性。这是多余的，我认为它会稍微降低质量。

您的图标非常小，您可以尝试将它们转换为 SVG 图标而不是光栅 PNG。

这是一些来自 CSS 技巧的 SVG 图标指南。 http://css-tricks.com/svg-sprites-use-better-icon-fonts/

我向您保证，这是值得的。它们看起来会更锐利!

祝你好运!