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; }

Answer 2

添加

img {
    -webkit-transition: -webkit-filter 1s
}

请参阅此处的工作示例：http://jsfiddle.net/45CCS/

如何使用css为过滤后的图像设置动画

2 个答案: