W3C home > Mailing lists > Public > www-style@w3.org > April 2009

Re: [css3-transitions] Complex easing functions

From: Dean Jackson <dino@apple.com>
Date: Fri, 10 Apr 2009 07:11:20 +1000
Cc: robert@ocallahan.org, Jon Rimmer <jon.rimmer@gmail.com>, www-style@w3.org
Message-Id: <DB49203E-E1E0-4E5E-A113-E7B755AA00FC@apple.com>
To: Chris Marrin <cmarrin@apple.com>

On 10/04/2009, at 3:20 AM, Chris Marrin wrote:

>
> On Apr 8, 2009, at 7:46 PM, Dean Jackson wrote:
>
>>
>> On 09/04/2009, at 12:31 PM, Robert O'Callahan wrote:
>>
>>> 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.

Sure, I think extending timing functions is going to be very useful.  
My example for keyframes was going outside what an extended timing  
function could offer (it's hard to imagine an author-friendly function  
that would always put green in the middle of every colour transition,  
no matter what the start and end colours are).

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

Definitely. I think we should do it, I just wanted to make it clear  
that it isn't going to solve what keyframe animations are used for.

Dean
Received on Thursday, 9 April 2009 21:12:06 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:46:58 GMT