html - 在过滤器上应用CSS3过渡

我有一个css3过滤器，我希望从一个 Angular 过渡到另一个 Angular ，而不是一刀切

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

我在下面尝试过，但是全盘改变。我有什么办法可以从一个 Angular 落过渡到另一个 Angular 落

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

最佳答案

我接受了扎克(Zach)的回答，并补充说:

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

现在，从左上 Angular 开始有擦除效果。

demo

请注意，我们仍然没有对滤镜本身进行动画处理，而是对应用滤镜的图层的透明度(在这种情况下为蒙版)进行动画处理。

还要注意，您有很多基础可玩，可以创建不同的渐变来进行 mask 。

另外，效果几乎看不到，因此我为灰度添加了亮度因子(仅用于演示)

当然，所有这些都限于webkit

Webkit

html - 在过滤器上应用CSS3过渡