Re: transitions vs. animations

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 UTC