在过滤器上应用CSS3过渡

Question

我有一个css3过滤器,我希望从一个角落转换到另一个角落而不是跨越

div {-webkit-filter: grayscale(1); }
div:hover { -webkit-filter: grayscale(0); }

我在下面试过,但它全面改变了.有什么方法可以从一个角落过渡到另一个角落

-webkit-transition: -webkit-filter 1s;

Answer 1

我已经接受了扎克的回答并补充道：

.filtered:before {
    transition: 2s -webkit-mask-size;
    -webkit-mask-position: top left;
    -webkit-mask-size: 0px 0px;
    -webkit-mask-image: linear-gradient(131deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 40%); 
    -webkit-mask-repeat: no-repeat;
}
.filtered:hover:before {
    -webkit-mask-size: 600px 600px;
}

现在左上角有擦除效果。

演示

请注意，我们并不是对滤镜本身进行动画处理，而是对应用了滤镜的图层的透明度（在这种情况下为遮罩）进行动画处理。

另请注意，您有很多基础可以使用，可以创建不同的渐变来进行遮罩。

另外，效果不太明显，所以我在灰度中添加了亮度因子（仅用于演示）

当然，这一切仅限于webkit