Re: transitions vs. animations

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?

Or did you mean that I could just write "transition: play(left,
bounce) 1s;" and it would automatically know to both transition the
left property and run the bounce transition?  That sounds possible.

~TJ

Received on Tuesday, 6 April 2010 05:20:08 UTC