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

Re: transitions vs. animations

From: Håkon Wium Lie <howcome@opera.com>
Date: Sun, 11 Apr 2010 13:16:12 +0200
Message-ID: <19393.44924.349325.470639@gargle.gargle.HOWL>
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: www-style@w3.org
Also sprach Andrew Fedoniouk:

 > > I think the syntax looks simple and doable. Are there use cases that
 > > would require more than one property to be changed, which couldn't be
 > > specified with multiple profiles?
 > Yep, and yet it removes that problem with transitions overriding
 > animations and vice versa. Everything is just an animation. Repeatable or 
 > not.

Yes, I like the simplicity. However, the question still lingers: are
there use cases that can be express in the current @keyframes proposal
that can't be expressed in multiple profiles?

You have used three properties:


What indivitual properties lie behind these? For example, does
'animate' expand into;


And, if so, are there similar expansions for 'animate-in' and

Or, is 'animate' just a shorthand for setting 'animate-in' and

Potentially, one could reduce the number of properties by having three
keywords, e.g.:

   animate: in left, during right, out top;

Or something.

 > > Now that I think about it, "@profile" doesn't seem intuitive. Would
 > > @pattern or @shape be better? Hmm.
 > My hope is that @profile could be useful in other places - not only
 > in animations. As I said, gradients can be expressed better with them.

Could you give us some examples?

 > @profile is an ordered table that defines strong points for
 > interpolation - function defined by table. And yet default
 > interpolation method should be mentioned, e.g. Hermite, Akima
 > splines or just linear.

You suggest these as keywords? How does the interpolation method
interact with the timing function? Or, are they separate?

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

The 'sway' animation hasn't been specified, so it's a bit unfair to
ask you to write out your example. However, assuming 'sway' animates
the 'left' property, the last line should be:

   "sway" left 1s 1s infinite;

I presume? And that the keyword "infinite" indicates that the
animation should stop just as the 'out' animations are started?

              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome
Received on Sunday, 11 April 2010 11:16:51 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:45 UTC