Re: transitions vs. animations

[re-send including the list].

On Mar 19, 2010, at 3:23 AM, Håkon Wium Lie wrote:

> The transition and the animation effects described in this example are
> very similar. It seems possible to consider transitions as a subset of
> animations and that names therefore can be reused. For example, we
> could use 'animation-duration' instead of 'transition-duration' in the
> example above.
> 
> No?

The way you've written this example makes them look similar, but there is a fundamental conceptual difference.

Transitions provide interpolation between existing CSS property value changes. In other words, if the 'left' property changes from 10px to 100px, without a transition it will change instantaneously. With a transition, it will change over time. This allows transitions to have a nice fallback behavior in older browsers which don't support them; users won't see the nice smooth changes, but the changes still happen.

The key concept with animations is that you apply style in order to put an element into an animating state. Just as you use CSS to set the highlight state of a button, you can use CSS to put an element into a "bouncing" state. That state may be temporary (finite number of iterations) or permanent (infinite). The properties in the animation keyframes are applied after all other properties, and override them, so animations don't provide nice fallback behavior (older browsers simply won't show the animations).

I think these concepts are different enough to warrant keeping them separate.

Simon