Re: transitions vs. animations

On Apr 4, 2010, at 8:02 pm, Andrew Fedoniouk wrote:

> I would propose following definition:
> 
> Animation is a sequence (possibly endless, repeatable) of set of transitions.
> 
> Consider this sample from current CSS Animation proposal:
> 
> @keyframes 'wobble'
> {
>   0% { left: 100px;  }
>   40% { left: 150px;  }
>   60% {  left: 75px;   }
>   100% {  left: 100px;  }
> }
> 
> And now imagine that you have some timing function that changes attribute "wobble" on some element.
> Having such function keyframe set above can be defined as:
> 
> [wobble] { transition: left(sin-in-out, Ts); }
> [wobble=0%] { left: 100px; }
> [wobble=40%] { left: 150px; }
> [wobble=60%] { left: 75px; }
> [wobble=100%] { left: 100px; }
> 
> I suspect that  in principle the whole animation module can be replaced by single attribute that defines timed generator:
> 
> sequence : attribute-name steps duration [ number-of-repeats];
> 
> So if you will define something like
> 
> div:hover
> {
>  sequence: "wobble" 4 400ms forever;
> }
> div[wobble=0] { left: 100px;  transition: ...; }
> div[wobble=1] { left: 150px;  transition: ...; }
> div[wobble=2] { left: 75px; transition: ...;}
> div[wobble=3] { left: 100px; transition: ...;}
> 
> you will be able to define various animations or other time based style changes.

This looks like a re-casting of the proposed animations with a different syntax, but I don't see how it addresses the desire to have transitions with reasonable fallback in older browsers.

Simon

Received on Monday, 5 April 2010 15:02:25 UTC