Applying CSS3 Transitions on Filters

Question

I have a css3 filter that I want to switch from one corner to another, and not through the panel.

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

I tried below, but it is changing in all directions. Is there a way that I can move from one corner to another?

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

Answer 1

I took Zach's answer and added:

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

Now in the upper left corner there is a cleaning effect.

demo

Please note that we do not animate the filter by itself, but the transparency (in that case masking) of the layer on which the filter is applied.

Also note that you have many opportunities for the game, creating various gradients for masking.

In addition, the effect was hardly visible, so I added a brightness factor in shades of gray (for demonstration only)

Of course, all this is limited to webkit

Answer 2

Despite the fact that the filter is animated, as you show, it is impossible to switch from one corner to another without duplicating the contents and using a mask. You can do this using pseudo-elements in certain cases, a child element or a single element.

I was hoping I could just use a pseudo-element without content, put it on top of the original and apply a filter to the pseudo-element, and it will affect the original from below, but unfortunately this is not the case. This would allow the gray scale movement to go in any direction, size or rotation that you would like without duplicating the content, but apparently it only applies to its element and not to the elements below (which is clear, d be difficult for browsers to say what exactly it should repaint).

To solve, the only way to move from one corner to another is to use a mask, as vals suggests. This still requires that the gray scale version be placed under the original, showing it as it hangs over

Filters will not work in FireFox or IE, because CSS Filters do not have much support . On the other hand, SVG filters for HTML have better support and SVG filters for SVG have even better support . If you can use them then, as the best method at the moment. Using an SVG filter will probably also allow you to move the filter from side to side, as you mentioned