动画时图像变得难看（CSS3 Transition）

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

这是显示发生的blury效果的图像

Answer 1

一件可以让事情变得更好的事情就是删除透明的＆＃39;您的图标属性的属性。这是多余的，我认为它会降低质量。

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

以下是CSS-tricks的SVG图标指南。 http://css-tricks.com/svg-sprites-use-better-icon-fonts/

我保证你值得付出努力。它们看起来会更加清晰！

祝你好运！

Answer 2

我对Bootstrap Glyphicons也有同样的问题。我通过增加字体大小来修复丑陋。

显然，glyphicons以高分辨率存储，渲染它的小尺寸使它们变得难看。

<ClCompile Include="file.cpp" />

.bigger {
  font-size: 22px;
}

.icon-spin {
  display: inline-block;
  animation: spin 2s infinite linear;
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}