动画时图像变得丑陋（CSS3 过渡）答案

【问题标题】：Images become ugly when animated (CSS3 Transition)动画时图像变得丑陋（CSS3 过渡）
【发布时间】：2014-07-18 04:12:14
【问题描述】：

自从新版本的 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

这是一张显示发生的模糊效果的图像

【问题讨论】：

你能制作一个 jsfiddle 吗？
如果在以前的版本中它运行良好，可能是一个错误。如果你做了一个工作演示，你可以提交给bugzilla。
当然。添加了链接 ;) ansoine.isondev.com/nav_test.html
@ThibautLamanthe 您链接的网页中没有图片
@Oriol 没有，但是后台的bug是一样的

标签： html css firefox transition

【解决方案1】：

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

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

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

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

祝你好运！

【讨论】：

【解决方案2】：

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

显然字形图标是以大分辨率存储的，将其渲染为小尺寸会使它们难看。

.bigger {
  font-size: 22px;
}

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


No animate - no sizing
<span class="glyphicon glyphicon-refresh"></span><br>
Animate - no sizing
<span class="glyphicon glyphicon-refresh icon-spin"></span><br>
<hr>
No animate - with bigger size -> nicer
<span class="glyphicon glyphicon-refresh bigger"></span><br>
Animate - with bigger size -> nicer
<span class="glyphicon glyphicon-refresh bigger icon-spin"></span><br>

【讨论】：