Re: transitions vs. animations

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). 

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).

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.