css - 如何使用CSS为过滤后的图像制作动画

Question

img:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

这会将图像从彩色转换为灰度。但我想用动画效果。我可以用 jQuery 做到这一点。但我需要纯 css 解决方案。

那么，如何在鼠标悬停在图片上时产生动画效果呢？

---

更新

我试过这个但在 firefox brwoser 中不起作用，甚至在 IE11 中它也不是灰度!

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */



    filter: grayscale(100%);

    transition : filter 500ms linear;
    -webkit-transition: -webkit-filter 500ms linear;
    -moz-transition: -moz-filter 500ms linear;

demo

Answer 1

您应该可以通过 transition

做到这一点

示例

img:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);

    transition : filter 500ms linear;
    -webkit-transition: -webkit-filter 500ms linear;
    -moz-transition: -moz-filter 500ms linear;
}