css - 替代-webkit-transition for firefox？

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

使用这个(虚拟数据)

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