- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 5 Apr 2010 22:19:11 -0700
- 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 UTC