W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: transitions vs. animations

From: Simon Fraser <smfr@me.com>
Date: Sat, 20 Mar 2010 08:49:00 -0700
Cc: www-style@w3.org
Message-id: <7606E66F-ACBB-46DF-9391-9A408614AF43@me.com>
To: Håkon Wium Lie <howcome@opera.com>
On Mar 20, 2010, at 6:40 AM, Håkon Wium Lie wrote:

> Also sprach Simon Fraser:
> 
>> <http://smfr.org/misc/animation-transition.html>
> 
> That's a cool demo. One transition (left to right movement) and one
> animation (bumpy movements) are combined to create a bumpy
> right-moving box.
> 
> However, you could also express this with two animations:
> 
>  http://people.opera.com/howcome/2010/tests/animations.html
> 
> I.e., you don't need transitions for this. 

Your example works, but you had to specify the final 'left' state (700px) in
two places: the :hover style, and the final keyframe. This is why transitions
are good: you don't have to tell the transition what the start and end states
are, because those states are already described by your CSS rules.

> Now, for the reverse movement (right to left), both examples have
> issues. It seems hard to attach animations to "non-hover" events. This
> is a problem worth fixing, I believe.

I agree that in some cases it's hard to describe symmetrical behavior
(for example with discrete timing functions).

However, I believe that transitions work just fine for the kinds of state
transitions you're talking about, and that animations are explicitly
designed for a different purpose.

Simon
Received on Saturday, 20 March 2010 15:49:46 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT