Question

我使用css3来制作黑白图像，然后将它们悬停着色。我使用-webkit-transition来获得chrome和Safari中的优秀效果，以及firefox的.svg解决方案，其中没有图像转换。是否有可能在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 */

Answer 1

对Firefox使用-moz-transition。

Answer 2

使用此（虚拟数据）

-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 */

替代firefox的-webkit-transition？

2 个答案: