Animating CSS3 Image Filters

Converting color photographs to black and white and sepia-tone, as well as blurring them is easy to do. The next obvious step is to animate these effects. Right now, these effects can be fully transitioned only in the most recent builds of Chrome; other browsers will show a “flick” between two filtered states, with no animation. As a rule, Dudley Storey doesn't show web development techniques until they are completely duplicable 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 he is making an exception.

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. The code is surprisingly simple. First, Dudley Storey sets up the image. Then turn it into greyscale, using the technique. To transition the effect, he must set the greyscale filter to the opposite value for CSS3, and to none for other browsers. To transition this effect smoothly, he must add CSS3. Since he's doing this to several images, he will make it a class.