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

On Monday 2010-04-19 11:30 -0700, Tab Atkins Jr. wrote:
> On Mon, Apr 19, 2010 at 10:56 AM, Simon Fraser <smfr@me.com> 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).)

Let's call your proposal (which is what used to be in the
transitions spec) (1).

I can think of two ways to animate gradients that would work more
generally:

 (2) Cross-fade the colors along the gradient line (i.e., in %-age
 space), and simultaneously animate the position of the gradient
 line. (this works between gradients and solid colors, but not
 gradients and images)

 (3) pure cross-fade (which even works between gradients and images)

It would be interesting to see if there are important use cases that
can be handled by (1) or (2) that don't work with (3).  (One that's
been mentioned is widening or narrowing a gradient.  Is this
important?)

> > functions (of which we have one already, which is CSS gradients). Some
> > suggested image generation functions are:
> >
> >  solid-color(r, g, b, a)

Why not just allow <color> values where images can go?

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/

Received on Monday, 19 April 2010 18:56:59 UTC