Re: transitions vs. animations

On Apr 3, 2010, at 1:06 AM, Håkon Wium Lie wrote:

> For example, in the
> current specs, the following two examples have identical results (I
> believe):
> 
> [example 9]
> 
>  a { 
>    color: blue;
>    transition: color 1s;
>  }
> 
>  a:hover {
>    color: red;
>  }
> 
> or:
> 
> [example 10]
> 
>  a { 
>    color: blue;
>  }
> 
>  a:hover {
>    color: red;
>    transition: color 1s;
>  }

I believe that is incorrect; that these two examples do NOT have identical results: 

The transition property on the property that you are transitioning TO only. So in example 10, you get the one second transition when you mouse over, but not when you mouse out. In example 9, it is on EVERYTHING that matches 'a', including 'a:hover', 'a:visited', 'a:focus', 'a:first-child', etc., (unless they have their own transition rules to override the 'a' rule). So if there were rules that caused the color to change when entering that state from another state, then you would also see the transition there.

This is, in fact, one of the ways that transitions are both very powerful and very simple.

P.S. Where are examples 9 and 10 from? I didn't see them in the Transitions working drafts listed on the "Current Work" page.

>  - some people sometimes confuse the term "transition" with
>    "transform"

This is a very minor problem. I sometime mix up words like that when I am speaking (as I simultaneously try to speak cogently, read the faces and listen to the responses of others in the room, and plan my next words while trying to stay on topic), but virtually never when writing (especially as I am constantly editing what I write). Mistakes when typing CSS rules can be caught very quickly, and diminish quickly as I use the properties more.

I am much more likely to mix up terms with less distinct conceptual differences in their names, such as between 'text-transform' and 'font-variant' (not very descriptive names), or between 'font-face' and 'font-family' (the values for 'font-family' has usually been a list of faces). But if I did that in a style sheet, it would be very quickly fixed.