带动画的CSS灰度 [英] CSS grayscale with animation

问题描述

我有一些css用于将我的图像更改为灰度（使用一些svg for firefox）

  img.grayscale {
 filter：灰度（100％）; 
 -webkit-filter：灰度（100％）; 
 -moz-filter：灰度（100％）; 
 -ms-filter：灰度（100％）; 
 -o-filter：灰度（100％）; 
 filter：url（desaturate.svg＃greyscale）; 
过滤器：灰色; 
 -webkit-filter：grayscale（1）; 
} 
  

但现在我希望悬停动画，将灰度值更改为0 。

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

 < script type =text / javascript> 
 $（。grayscale）。悬停（
 function（）{
 $（this）.animate（{
'-webkit-filter'：'grayscale（'0 '％）'
}，300）; 
} 
）; 
< / script> 
  

我认为可以将％从100％设为0％，不是吗？ / p>

编辑：我正在尝试为所有浏览器做，不仅是chrome，而且我在chrome上进行测试，这就是为什么我没有改变所有属性。我想当我找到chrome的答案时我会为其他浏览器做同样的事情：）

解决方案

为什么根本使用animate（）？您已经只是为webkit制作动画，那么为什么不使用过渡属性和类来触发动画呢？像这样：

  img {
 -webkit-transition：all 300ms; 
} 
 
 img.grayscale {
 -webkit-filter：grayscale（1）; 
} 
  

然后只需通过调用

删除课程

$（'img.grayscale'）。removeClass（'grayscale'）;

注意：我不知道仅仅为灰度设置动画的具体属性是什么，但是如果你没有对元素进行任何其他转换，那么转换all就可以了。

i have some css for changing my image into grayscale (with some svg for firefox)

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

but now i want animation on hover for changing the value of the grayscale to 0.

I have this code but it doesn't do anything (on chrome of course), i have no idea why it doesn't animate at all.

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

I think it's possible to animate the % from 100% to 0%, isn't it?

Edit : i'm trying to do for all browsers, not only chrome but i do my tests on chrome that's why i'm not changing all the properties. I think when i'll found the answer for chrome i'll can do the same for the other browers :)

解决方案

Why use animate() at all? You're already only animating for webkit, so why not use the transition property and classes to trigger the animation? Like this:

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

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

And then just remove the class by calling

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

Note: I don't know what the specific property is to just animate just the grayscale, but if you're not doing any other transitions on the element, transitioning "all" works just fine.

这篇关于带动画的CSS灰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！