W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: transitions vs. animations

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 5 Apr 2010 22:19:11 -0700
Message-ID: <l2sdd0fbad1004052219j36a98f60r5f7b4169c4484f7a@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: Chris Marrin <cmarrin@apple.com>, "www-style@w3.org list" <www-style@w3.org>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT