CSS过渡缓解在Firefox中无法正常工作

Question

我有一个简单的代码，灰度svg和翻转效果到灰度（0％）..翻转效果在Chrome中有效但在Firefox中不起作用，请你检查一下可能出错了什么，我在这里错过了什么？这是我的jsFiddle .. http://jsfiddle.net/8yQ9K/

 img.grayscale:hover {
   filter: none;
   -webkit-filter: grayscale(0%);
      -moz-filter: grayscale(0%);
       -ms-filter: grayscale(0%); 
 }

Answer 1

Firefox并不支持filter（或-moz-filter），因此它不会动画CSS Filter MDN。

它通过<filter>支持SVG filter:url(svg-url#element-id)元素，这就是您正在使用的（您甚至在代码中都有评论＆＃34; Firefox 3.5 +＆＃ 34）。我不确定svg过滤器元素在firefox中是否具有动画效果，但您可能希望将其放在您的filter:none现在所在的非灰度svg过滤器中。