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

On Apr 19, 2010, at 10:56 AM, Simon Fraser wrote:

> {snip}
> 
> 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.

The more I think about it, the more I really like this idea, but what I'd really like to see is this expanded to cover all animatable properties. So that a getComputedStyle() on any animatable property undergoing a transition (or in the middle of an animation) would return an appropriate functional notation specifying the start value, end value and completion percentage.

I also want that function to be a valid input value in the original style sheet. So a valid value for any color could be: fade(red, blue, 40%), etc. In addition to keeping the value symmetry, I can see interesting uses for specifying properties this way and driving an animation in script by simply manipulating the percentage value.

Given the direction Anne is taking the CSSValue API, I can also envision an interface for each of these functions where in addition to accessors for the function's arguments, you could have a currentValue (read-only) accessor to get the actual current value.


One question however, does the percentage returned refer to the input or output percentage of the transition-timing function?

Peter

Received on Thursday, 22 April 2010 20:47:04 UTC