Re: transitions vs. animations

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:

  animate
  animate-in
  animate-out

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

   animate-delay
   animate-duration
   animate-timing-function

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

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

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
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Sunday, 11 April 2010 11:16:51 UTC