在 Mozilla FF 中不会发生过渡效果答案

【问题标题】：Transition effect won't take place in Mozilla FF在 Mozilla FF 中不会发生过渡效果
【发布时间】：2014-07-29 23:25:31
【问题描述】：

我有一个缩略图列表（投资组合项目），其中有一些悬停动画。因此，缩略图图像变成灰度，变得模糊和变亮一点。但是，我需要它流畅，所以我使用了过渡，它在 Safari、Chrome 和 Opera 中运行良好，但在 Mozilla Firefox 中失败（我目前正在 Mac/FF 29 上测试它）。
这是 HTML 部分：

<ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                 <a href="#gallery_1" data-toggle="lightbox">
                <img src="img/gallery/gallery_1.jpg" class="greyer" alt="">
                 </a>
                </div>
        </li>

CSS如下：

.greyer {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}

.greyer:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(1px);
-o-filter: grayscale(100%) brightness(140%) blur(1px);
-moz-filter: grayscale(100%) brightness(140%) blur(1px);
-ms-filter: grayscale(100%) brightness(140%) blur(1px);
filter: grayscale(100%) brightness(140%) blur(1px);
filter: url(grayblurr.svg#grayscaledBlur);
}

提前感谢您的提示和解决方法！

【问题讨论】：

-moz-filter 无效。在您拥有的过滤器中，FF 将使用filter: url(..)，所以大概这就是问题所在。对于灰度解决方法怎么样：stackoverflow.com/a/12173285/246342
感谢您的评论 Alex K.，实际上我已经尝试过您提到的解决方案，但结果是一样的。在这种情况下，我唯一的问题是使事情（动画）顺利进行，不幸的是，这在 FF 中不会发生

标签： html css firefox css-transitions

【解决方案1】：

我已经使用 SVG 进行了尝试。它不显示灰度图像，但在 Mozilla 上显示模糊效果，在所有其他浏览器中都可以正常工作。

代码如下：

CSS：

<style>
.svg-only-blur {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}


.svg-only-blur:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(4px);
-moz-filter: grayscale(100%) brightness(140%) blur(4px);
-o-filter: grayscale(100%) brightness(140%) blur(4px);
-ms-filter: grayscale(100%) brightness(140%) blur(4px);
filter: grayscale(100%) brightness(140%) blur(4px);
filter: url(#blur); 

}

</style>

HTML：

   <body>
<svg version="1.1"  height="0" width="0">
  <defs>
     <filter id="blur" x="0" y="0">
       <feGaussianBlur stdDeviation="3" />
     </filter>
  </defs>
</svg>  
<img src="1.jpg" class="svg-only-blur" alt="">

</body>

希望对你有帮助。

【讨论】：

感谢您的贡献！实际上，我在我的初始代码中确实使用了 SVG，并根据需要实现了同时灰度 + 模糊的结果。问题是我希望过渡顺利/缓慢（就像在 Chrome 或 Safari 中一样）。在 FF 中，过渡发生得迅速而突然……