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

Re: transitions vs. animations

From: Håkon Wium Lie <howcome@opera.com>
Date: Sat, 10 Apr 2010 16:01:44 +0200
Message-ID: <19392.33992.717576.505320@gargle.gargle.HOWL>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
Andrew Fedoniouk wrote:

 > Sorry, but why not just 'animate'?
 > 
 > div { position:absolute; left:0px; }
 > 
 > So simple transition will be:
 > 
 > div:focus { left:100px; animate: left ease-in 1s; }

I like it.

 > And repeatable animation will be
 > 
 > div:focus { animate: left "wobble" 1s infinite; }
 > 
 > Where "wobble" is defined as table function:
 > 
 > @profile "wobble"  0% 0px,  40% 150px, 60% 75px, 100% 0px;

That could work. I'd probably write it as:

@profile "wobble"  
  0%    0px,
  40% 150px, 
  60%  75px, 
  100%  0px;

 > Both cases define animations - one happens to be one-time animation
 > and another is repeatable infinite animation.
 > 
 > Idea was explained here:
 > http://lists.w3.org/Archives/Public/www-style/2010Apr/0264.html

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.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Saturday, 10 April 2010 14:02:29 GMT

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