Re: transitions vs. animations

On Apr 10, 2010, at 12:38 PM, Andrew Fedoniouk wrote:
>> 
>> Right. For comparison purposes, perhaps you could write up sample code
>> for the use cases found here:
>> 
>> http://people.opera.com/howcome/2010/ta/
>> 
>> I've started in the right-most column, but didn't quite see an obvious
>> syntax for 2a.
>> 
> 
> Here is how that column may look like:
> ('once' here is synonym of '1').
> 
> I am assuming that there are 'animate', 'animate-in' and 'animate-out' properties.
> 'animate' when defined sets value of 'animate-in' and 'animate-out' properties.
> 
> 2a) "Play the 'bounce animation once for 1s when the element is hovered."
> 
> foo:hover
> {
>   animate-in: "bounce" top 1s once;
> }
> @profile "bounce"
>   0% 0px,
>   33% -20px,
>   66% 20px,
>   100% 0px;

I don't quite understand when you expect animations to run with this syntax. What's the trigger for the animation running? Is it when the animate-in property itself changes (which is similar to Hakons' "effects" property behavior)?

Consider:

.foo {
  animate-in: "bounce" top 1s once;
}

.bar {
  animate-in: "bounce" top 1s once;
}

When the class changes from "foo" to "bar", does the animation of "top" run?

Simon