Re: Transitions of CSS images, including transitions of gradients.

On Mon, Apr 19, 2010 at 10:56 AM, Simon Fraser <> wrote:
> 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.

The most basic and simple rule, obviously, is that if the start and
end gradients have the same number of color-stops, then you simply
pair the stops up in order and interpolate their positions and colors
in the established manner.

At the moment I can't think of any more complex rule that would work
in general.  If an author wishes to, say, transition from a 2-stop to
a 3-stop gradient, they can currently hack it by manually upgrading
the 2-stop to a 3-stop, by adding an additional stop that matches
whatever the color would be at the point they want.  (That is, if they
are animating linear-gradient(white,black) to linear-gradient(yellow,
green, blue), they can just change the first one to instead be
linear-gradient(white, #808080, black).)

> 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.

I think this is a good idea.  Defining and returning a functional
notation for the cross-fade is the cleanest solution to the problem,
and allows other interesting and cool effects.

The idea of more general filter effects is very interesting, and
something that I want to pursue with SVG collaboration.  Exposing
canned filters in an image-generating function, frex, could be an
awesome thing.

> 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.

Not sure about either of these right now.  The simple answer would be
"the larger of each dimension", but that would produce bad visual


Received on Monday, 19 April 2010 18:31:53 UTC