CSS 灰度动画

我有一些CSS来将我的图像更改为灰度（还有一些用于firefox的svg）

img.grayscale{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%); 
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%); 
            -o-filter: grayscale(100%);
            filter: url(desaturate.svg#greyscale);
            filter: gray;
            -webkit-filter: grayscale(1);
        }

但现在我想要悬停动画以将灰度值更改为 0。

我有这段代码，但它没有做任何事情（当然在 Chrome 上），我不知道为什么它根本不动画。

<script type="text/javascript">
        $(".grayscale").hover(
            function () {
                $(this).animate({
                    '-webkit-filter': 'grayscale('0'%)'
                }, 300);
            }
        );
    </script>

我认为可以将 % 从 100% 动画化到 0%，不是吗？

编辑：我正在尝试为所有浏览器执行此操作，不仅是 chrome，而且我在 chrome 上进行测试，这就是为什么我不更改所有属性。我想当我找到 chrome 的答案时，我可以为其他浏览器做同样的事情:)

为什么要使用 animate() 呢？您已经只为 webkit 制作动画了，那么为什么不使用过渡属性和类来触发动画呢？像这样：

img {
  -webkit-transition: all 300ms;
}

img.grayscale {
  -webkit-filter: grayscale(1);
}

然后通过调用删除该类

$('img.grayscale').removeClass('grayscale');

注意：我不知道仅对灰度进行动画处理的具体属性是什么，但如果您没有在元素上进行任何其他转换，则转换“全部”效果很好。