Firefox的-webkit-transition的替代品？答案

【问题标题】：alternativ to -webkit-transition for firefox?Firefox的-webkit-transition的替代品？
【发布时间】：2014-05-20 18:46:18
【问题描述】：

我使用 css3 来制作黑白图像，然后在悬停时为它们着色。我使用 -webkit-transition 在 chrome 和 Safari 中获得不错的效果，并使用 .svg 解决方案用于没有图像过渡的 firefox。是否也可以在 Firefox 上进行转换？

网站：Svenssonsbild.se

css:

img.attachment-full {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all 1s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

【问题讨论】：

标签： css wordpress

【解决方案1】：

使用这个（虚拟数据）

-webkit-transition: all 500ms ease;    /* Chorme  */
-moz-transition: all 500ms ease;       /* Firefox */
-ms-transition: all 500ms ease;        /* IE */
-o-transition: all 500ms ease;         /* Opera */
 transition: all 500ms ease;           /* All */

【讨论】：

谢谢。为 Opera、IE 和 Firefox 添加了转换。无法测试 IE，但它似乎不适用于我的 Firefox。它与 svg 过滤器有什么关系吗？
如果你愿意，你可以使用这样的过滤器：-webkit-filter: grayscale(1);过滤器：url（filters.svg#grayscale）； /*Firefox*/ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*IE*/ **
过滤器可以工作，我只想要 webkit-transition 提供的过渡。

【解决方案2】：

对 Firefox 使用 -moz-transition。

【讨论】：