Re: transitions vs. animations

Please see my comments below:


From: Simon Fraser 
Sent: Thursday, April 15, 2010 11:24 AM
To: Andrew Fedoniouk 
Cc: HåkonWium Lie ; www-style@w3.org 
Subject: 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?
There are "new-animation-in" and "old-animation-out" values
when used-style of the element changes.

Rule is simple: 
a) if there is "new-animation-in" - use it.
b) if no "new-animation-in" given use "old-animation-out" value. 
c) If "new-animation-in" and "old-animation-out" are undefined then 
the element is said having no animation in this state/style.

So in your case when element gets either class .bar 
or .foo it will play 1s bounce once. It will not play any 
animations if you will remove .foo *and* .bar.

If you will remove .foo and apply .bar then you will have
"style changed" condition and so new-animation-in is used -
it will play bounce once.

If you have defined both .foo and .bar and will remove either
one of them then fact of animation depends on specificity
of these rules. .bar removal will cause animation and .foo - not. 

-- 
Andrew Fedoniouk

http://terrainformatica.com