Re: transitions vs. animations

On Thu, Apr 8, 2010 at 10:47 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Apr 7, 2010, at 5:19 PM, Håkon Wium Lie wrote:
>
>> Perry Smith wrote:
>>
>>>> How would you like to fill in the empty boxes?:
>>>>
>>>>  http://people.opera.com/howcome/2010/ta/index.html
>>>
>>> For case 2b and 2c, I think Tab's ideas now work by adding the
>>> animation to what I call the "unadorned" selector (i.e. the foo
>>> selector in your example).  I believe you would want the "play-in"
>>> concept so it plays when it transitions to that state but does not
>>> play when the page is first drawn.
>>
>> I'd love to add a column with Tab's proposals. Anther tab, so to say :)
>>
>
>
> Can I have a column too? It would be the same as "Current Drafts", except for the following:
>
> 2b)
> foo {
>        position:static;
>        transition: position 1s / bounce 1s;
> }
> foo:hover { position:relative; }
>
> 2c)
> foo {
>        position:static;
>        transition: position 1s / bounce 1s alternate;
> }
> foo:hover {
>        position:relative;
>        transition-animation: bounce 1s;
> }
>
> 3b) [same as Tab's except for changed syntax (see below)]
> .one {
>        position: relative;
>        left: 0px;
>        transition: left 1s / bounce .2s 5;
> }
> .two {
>        position: relative;
>        left: 500px;
> }
>
> 3c)
> .one {
>        position: relative;
>        left: 0px;
>        transition: left 1s / bounce .2s 5;
> }
> .two {
>        position: relative;
>        left: 500px;
>        transition: left 1s / bounce .2s 5;
>        animation: bounce 0.2s 5, sway 1s 1s infinite;
> }
>
> In this e-mail, I've changed all the instances of what I would have previously written as  'play(<animation-shorthand-values>)' (which Tab uses too now) to '/< transition-animation-values>'. This should allow for shorthand or not, and more granular control. See below for details.
>
>
> Transition Shorthand Property:
> <transition-shorthand-from-current-draft>[/< transition-animation-values>]?
>
> Where < transition-animation-values> is:
>
> [< transition-animation-name> || < transition-animation-duration> || < transition-animation-timing-function> || < transition-animation-delay> || < transition-animation-iteration-count> || < transition-animation-direction>] [, [< transition-animation-name> || < transition-animation-duration> || < transition-animation-timing-function> || < transition-animation-delay> || < transition-animation-iteration-count> || < transition-animation-direction>] ]*
>
> Where all those values are the same as for their animation value analogs, and there is also a shorthand called 'transition-animation' (I used to call it 'transition-triggered-animation', but that's kind of long).

As far as I can tell, this is identical to my proposal, just with a
slightly differing syntax, right?  You use /s to separate the
animations, rather than wrapping them in a function?

> The difference is that the "transition-animation" only plays during the time that the transition is playing, and is time-clipped to that duration. Thus, you can have infinite iterations in the transition-animation part, but they would only last while the property was transitioning (would not play during the transition-delay either).

I think this is a good idea.

> Another difference is that if the keyframes are animating the same property as the transition, then the effect is additive. This way, you can have, e.g., a horizontal move that was not smooth, but staggered, surged, or spurted from left to write, due to the effects of the transition-animation.

You haven't specified how this is supposed to work.  Does this mean
that if I am transitioning 'left' and the animation has a 'left:20px;'
rule in one of the keyframe-declarations, that point in time will have
left equal to (whatever the transition would set it to) + (20px)?

If so, how does a % work?  How do colors work?  How do keyword
properties work?  How do I say "ignore the transition, instead use
this cool animation function I've defined here" (the "fling and
bounce" transition I mentioned earlier).

~TJ

Received on Thursday, 8 April 2010 18:46:45 UTC