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

Re: transitions vs. animations

From: Simon Fraser <smfr@me.com>
Date: Thu, 15 Apr 2010 11:24:12 -0700
Cc: HåkonWium Lie <howcome@opera.com>, www-style@w3.org
Message-id: <4D364AF1-F54B-42FB-AAB7-82F8C6BE1B2C@me.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
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
Received on Thursday, 15 April 2010 18:25:06 GMT

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