Right now, these effects can be fully transitioned only in the most recent builds of Chrome and Safari; other browsers will show a “flick” between two filtered states, with no animation. As a rule, I don’t show web development techniques until they can be duplicated in at least two different browsers, but in this case, the effects are so neat (and expected to be fully supported in all browser versions so soon) that I’m making an exception.

You can see how your browser performs with animated filter effects in the example at the top of this article (a variation on my earlier “Animated Card Fan” effect, with individual transitions on each card when it is hovered over).

Greyscale to Color Image Transition

An obvious use of an animated filter is to transition an image from greyscale to color on mouseover, an ideal effect for a portfolio or image gallery.

A Note On SVG

In practice, animated transitions like these are equally achievable in SVG, but only if the image itself is part of the SVG file. Taking this approach would totally eliminate the picture from appearing in IE8. For that reason, I’ve kept SVG’s role in this exercise to that of an external filter.