CSS Image Transitions

Introduction

CSS Transitions (http://dev.w3.org/csswg/css3-transitions/) and Animations (http://dev.w3.org/csswg/css3-animations/) provide a way for web authors to describe various kinds of animations of CSS properties. However, as described in the Transitions proposal (http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types-), only a subset of values types are currently considered to be animatable; those are ones which can be animated using numeric interpolation, or have an "obvious" way to interpolate their values (e.g. colors).

A major use case is not yet supported: the interpolation of images.

We should be able to interpolate linear-gradient() and radial-gradient() images by interpolating the colors and color-stops, given some rules about when the match closely enough to be interpolatable.

However, authors expect to be able to describe transitions of properties in CSS that have url image values, and see cross-fading of images. Here's a simple example:

.box {
 background-image: url(kitten.png);
 transition: background-image 1s;

}

.box:hover {
 background-image: url(puppy.png);
}

When hovered, the background-image of the box should do a 1-second crossfade between the kitten and the puppy. When unhovered, the background image will crossfade back to the kitten.

When a property is being transitioned or animated, getComputedStyle() returns the current (interpolated) value, which, for those properties that are currently allowed to animate, is not problematic. However, we need to specify what getComputedStyle returns for an image property that is in the middle of an animation.

We could arbitrarily return the source or destination image, based on whether the animation is less or more than 50% complete. However, I believe that we can get a lot of new, interesting functionality if we add a new functional notation for blending images. This would involve extending the definition of <image> to allow for image generation functions (of which we have one already, which is CSS gradients). Some suggested image generation functions are:

solid-color(r, g, b, a)
cross-fade(<image 1>, <image 2>, 0.4)     // 40% of the way through a cross-fade between image 1 and image 2
wipe-right(<image 1>, <image 2>, 0.2)     // 20% of the way through a wipe effect (image 2 moves in from the right)
push-top(<image 1>, <image 2>, 50%)       // 50% of the way through a push effect (image 2 pushes image 1 down from the top)

You could also imagine filter effects:

sepia(<image>, 80%)
guassian-blur(<image>, 10px)

These image generation functions could be used wherever an image is used in CSS, and could be returned by getComputedStlye() for images that are being animated. Note that CSS transitions would not allow you to describe the effect used for image transitions (e.g. wipe vs. cross-fade) without further extension, so you'd get back a cross-fade() for now.

One issue to resolve is what is the intrinsic size of an image which is the result of blending two images of different size. Another is how do push and wipe-style transitions of tiled backgrounds appear, when the images are of different size.