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

Re: [css3-transitions] Complex easing functions

From: Chris Marrin <cmarrin@apple.com>
Date: Fri, 10 Apr 2009 10:52:41 -0700
Cc: robert@ocallahan.org, Jon Rimmer <jon.rimmer@gmail.com>, www-style@w3.org
Message-id: <511C650B-94D5-46A0-98C1-8A198A146A18@apple.com>
To: Dean Jackson <dino@apple.com>

On Apr 9, 2009, at 2:11 PM, Dean Jackson wrote:

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


Yes, I agree. Is see what you were saying now about transitioning  
through specific colors. There are things you want to do with  
keyframes that there are really no alternatives for. Composite easing  
functions just gives you the ability to do things like bounce and  
discrete functions, both of which are very useful. I guess the  
question is whether they are useful enough to add now or should we  
wait till later...

-----
~Chris
cmarrin@apple.com
Received on Friday, 10 April 2009 18:02:06 GMT

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