Re: transitions vs. animations

On Apr 5, 2010, at 10:19 PM, Tab Atkins Jr. wrote:

> On Mon, Apr 5, 2010 at 9:23 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> 
>> On Apr 5, 2010, at 3:32 PM, Tab Atkins Jr. wrote:
>> 
>>> I don't see any reason why bouncing an element up and
>>> down as you slide it from left to right should be too advanced.  This
>>> would be the entire thing, in my proposed syntax:
>>> 
>>> @keyframes bounce {
>>>  from { top: 0; }
>>>  25% { top: 20px; }
>>>  50% { top: 0; }
>>>  75% { top: -20px; }
>>>  to { top: 0; }
>>> }
>>> 
>>> .slider {
>>>  left: 0;
>>>  transition: left 1s, play(left, bounce) 1s;
>>> }
>>> 
>>> .slider:hover {
>>>  left: 400px;
>>> }
>>> 
>>> Done!
>> 
>> I think this has promise, and is very similar to what I had swimming around in my head after the f2f. But I don't think you need the second 'left' inside the function. I'm imagining the component property for that function as being something I'll call 'transition-side-effect-animation-that-plays-whenever-the-transition-takes-place' (although perhaps we can find a shorter name). Since It happens whenever the already specified 'transition-property' changes, then it doesn't need repeating inside the function.
> 
> Well, you need some way to attach it to a particular property's
> transition.  If you omitted the 'left' in "play(left,bounce)", how
> would it know to bounce when the "left" property value changes?

Because you already have a transition-property of left ('transition: left 1s...'). That already says "play this transition whenever 'left' changes". 

OK, actually, I didn't notice your comma and the location of your second '1s' (a side effect of reading mail quickly from a phone screen). I was thinking more like this:

transition: left 1s play(bounce 1s infinite);

So that as long as the 'left' property was within a transition, then the named animation inside "play()" would run as specified there. If you didn't include 'inifinite', then it would only bounce once per transition (or however many iterations you did specify instead). This seems like a very straightforward way to handle this. 

So, the components shown in the example above are:
'transition-property' 
'transition-duration' 
'transition-triggered-animation', where 'transition-triggered-animation' has a function value whose argument is a complete shorthand value of the animation property.

The duration of the transition (or maybe the combined length of the transition-delay  and transition-duration) would clip the duration and delay of the animation called within it. 

Of course, I would still want to be able to call animations in the existing way too (independent of transitions).