Re: transitions vs. animations

--------------------------------------------------
From: "HåkonWium Lie" <howcome@opera.com>
Sent: Saturday, April 10, 2010 7:01 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
Subject: Re: transitions vs. animations

>
> 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;

2b) "Same as 2a, but also play the animation when the element is 
un-hovered."

  foo:hover
  {
    animate: "bounce" top 1s once;
  }
  @profile "bounce"
    0% 0px,
    33% -20px,
    66% 20px,
    100% 0px;

2c) "Same as 2b, but play the animation in reverse when un-hovered."

  foo:hover
  {
    animate-in:  "bounce" top 1s once;
    animate-out: "reversed-bounce" top 1s once;
  }
  @profile "reversed-bounce"
    0% 0px,
    33% 20px,
    66% -20px,
    100% 0px;

3a) "When an element's class changes from "one" to "two", move the
    element 500px rightwards and simultaneously play the 'bounce'
    animation 5 times for a total of 1s.

  .one
  {
    position: relative;
    left: 0px;
  }

  .two
  {
    position: relative;
    left: 500px;
    animate-in: "bounce" top 0.2s 5,
                linear left 1s once;
  }
  @profile "bounce"
    0% 0px,
    33% -20px,
    66% 20px,
    100% 0px;

3b) Same as 3a, but also play but play the 'bounce' animation when the
    class of the element is changed back from "two" to "one", while the 
element
    is moved back to its original position.

  .one
  {
    position: relative;
    left: 0px;
  }

  .two
  {
    position: relative;
    left: 500px;
    animate: "bounce" top 0.2s 5,
             linear left 1s once;
  }
  @profile "bounce"
    0% 0px,
    33% -20px,
    66% 20px,
    100% 0px;

3c) "Same as 3b, but play the 'sway' animation (which takes 2s to run) 
continously
    between the two 'bounce' animations."

  .one
  {
    position: relative;
    left: 0px;
  }

  .two
  {
    position: relative;
    left: 500px;
    animate: "bounce" top 0.2s 5,
             linear left 1s once,
             "bounce" left 1s 1s infinite;
  }

  @profile "bounce"
    0% 0px,
    33% -20px,
    66% 20px,
    100% 0px;

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Saturday, 10 April 2010 19:39:09 UTC