Re: [css3-transitions] Complex easing functions

On Apr 8, 2009, at 7:46 PM, Dean Jackson wrote:

>
> On 09/04/2009, at 12:31 PM, Robert O'Callahan wrote:
>
>> While it would be a little painful, you can still achieve you  
>> elastic or bounce effects today using CSS animations with keyframes.
>>
>> It seems a lot easier to implement bounce effects by relaxing the  
>> [0,1] constraint on curves than by implementing all of CSS  
>> animations. (Especially since I find the case for CSS Transitions a  
>> lot stronger than for Animations.) I'd support adding that.
>
> Bounce effects work well with extended timing functions, but only if  
> you are doing positional animations (ie. moving an element). They  
> don't work for doing things like fading from red to blue via green.  
> For that you need keyframes.


The timing function doesn't care about the type of the values being  
animated. It simply applies a function to the timing variable used to  
interpolate between the start and end values. It's easy to see how  
applying this to a positional transition would give you a nice bounce  
effect. For instance, going from 0px to 100px with some overshoot  
would cause the value to go from 0px to 110px, back to 90px, then  
settling on 100px eventually. You do this by making the timing  
variable go from 0 to 1.1, then to 0.9, and eventually having  it  
settle to 1.

But you can apply this to color animations just as well. Going from  
blue to red would follow the same path as before, it would just  
"bounce" up to purple or something, which might not make a lot of  
sense. But you can imagine that animating from a dark red to a bright  
red and having it bounce to a bit brighter red might give you a nice  
effect.

I think that relaxing the [0,1] constraint of the timing variable  
would require us to more tightly define the interpolation technique,  
especially how clamping is handled. But I think it would not be hard  
to spec.

-----
~Chris
cmarrin@apple.com

Received on Thursday, 9 April 2009 17:21:23 UTC