Transitions of CSS images, including transitions of gradients.

On Mar 31, 2010, at 2:07 PM, Simon Fraser wrote:

> Another agenda item I'd like to add is a discussion of transitions of CSS images, including transitions of gradients.

Allow me to provide more information.

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.

Simon

Received on Monday, 19 April 2010 17:57:16 UTC