Re: transitions vs. animations

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.