applying CSS3 Transitions on filters

Question

I have a css3 filter that i wish to transition from one corner to another and not across board

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

I tried below but it changes across the board. Is there any way i can transition from one corner to another

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

Answer 1

Although filter is animatable as you show, it is impossible to transition from one corner to the other without duplicating the content and using a mask in addition. You can do so using pseudo-elements in certain cases, child element, or a sibling element.

I was hoping I could just use a pseudo-element with no content, place it over the original, and apply the filter to the pseudo-element and it affect the original beneath, but sadly that's not the case. This would allow the movement of the gray scale to go in any direction, size, or rotation you'd like without duplicating the content, but apparently it only applies to the element it's on, not the elements below (which is understandable because it'd be difficult for browsers to tell what exactly it should re-color).

Onto the solution, the only way to transition from one corner to another is to use a mask as vals suggests. This still requires that the grey scale version be placed beneath the original, revealing it as it is hovered over

Filters will not work in FireFox or IE because CSS filters don't have much support. SVG filters for HTML, on the other hand, have better support and SVG filters on SVG have even better support. If you can use these then that's like the better method at the moment. Using an SVG filter will likely also allow you to move the filter from side to side as you mentioned

Answer 2

I have taken Zach 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 there is a wipe effect from the upper left corner.

demo

Notice that still, we are not animating the filter in itself, but the transparency (inthat case the masking) of the layer that has the filter applied.

Also notice that you have a lot of ground to play with, creating different gradients to do the masking.

Also, the effect was little visible, so I have added a brightness factor to the grayscale (just for the demo)

Of course, all this limited to webkit