Re: transitions vs. animations

--------------------------------------------------
From: "HåkonWium Lie" <howcome@opera.com>
Sent: Sunday, April 11, 2010 4:16 AM
To: "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
Subject: 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?

@keyframes define function that ties progress axis (given by percentage)
with one or more value sets.
For example you can define @keyframes function that defines progress of
top and left attributes at the same time:

   progress -> top, left;

Such functions can always be split into two functions:

   progress -> top;
   progress -> left;

So @profile and @keyframes are equivalent in this respect.

>
> 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'?

Correct,  'animate' is 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;
>

(I don't think that 'during' is required)

animate-in/out is a property defined by

white-space-value-list [, white-space-value-list]*

To be able to define both 'in' and 'out' parts in animate we should
have one more type of list in CSS grammar.  Sort of:

animate: left |  top;

Prepending lists with 'in' and 'out' as you did may not work if you need
define multiple animated properties.

> Or something.

At the moment I am using "function notation with named arguments".

animate: left(duration-in : 1s, duration-out : 0 )
                top(duration-in : 0, duration-out : 1s );

I am not using animate-duration, animate-timing-function, etc.
at all.  I think that 'animate' is an atomic property - it has
to be applied on either-all-or-none basis.

That works but is not perfect in cases when multiple animated
properties need to be defined - redundant declarations, e.g.

animate: left(duration-in : 1s, duration-out : 0 )
                top(duration-in : 1s, duration-out : 0 )
                bottom(duration-in : 0, duration-out : 1s )
                right(duration-in : 0, duration-out : 1s );

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

Here it is:

@profile "my-color-profile"
        0% black,
        25% gray,
        50% orange,
        100% red;

Simple gradient:

  background: gradient( linear  black red, top bottom);

Gradient with custom color profile:

  background: gradient( linear  "my-color-profile", top bottom);
  background: gradient( radial  "my-color-profile", 50% 50%);
  background: gradient( conic  "my-color-profile", right bottom);

>
> > @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?

In principle @profile could have some parameter that will define
interpolation method but I think it is just enough to pickup some
common method that all UA will implement.

At the moment 'css3-animations' module allows to define
interpolation method for each step only:
http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-
that is quite redundant and hard to make it right by human.

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

"sway" function that is defined in your doc in other column has the same
profile values as "bounce" function.
So ""bounce" top" is a "bounce" and ""bounce" left" is a "sway". I just 
wanted to
show that the same profile can be applied to different properties.

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

Correct, in animate-out phase keyword 'infinite' has computed value '0 
iterations'.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Sunday, 11 April 2010 20:49:05 UTC