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

Re: transitions vs. animations

From: Simon Fraser <smfr@me.com>
Date: Mon, 05 Apr 2010 08:01:49 -0700
Cc: Alex Mogilevsky <alexmog@microsoft.com>, Håkon Wium Lie <howcome@opera.com>, www-style@w3.org
Message-id: <A619EEC8-EACF-4A09-9ED5-73E8BF18516D@me.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
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 GMT

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