Proposal: Iterative steps for CSS Transitions

Hi,

The CSS Transition spec proposal only supports fully-tweened  
transitions, e.g. any numerical transition will hit as many numerical  
points in-between the start and finish figures as the duration of the  
transition will allow. In other words, an element moved from left: 0px  
to left: 1000px over a duration of 10 seconds will very smoothly move  
the element across the screen.

However, if you deliberately want a non-smooth transition, e.g. more  
of a finely-controlled stop motion animation, there's no way to do  
that. Even CSS Animations and the keyframes it offers won't allow you  
to do this.

While non-smooth transitions may seem undesirable in most situations,  
they can be invaluable for background image transitions. Using a CSS  
Sprite, one could create any imaginable visual transition and simply  
use a CSS Transition for the animation.

With the current spec proposal (and its implementation in WebKit),  
this is impossible to accomplish without simply manually writing out  
Javascript to iterate through a series of different style properties  
on the element for each iterative step — basically the very process  
that CSS Transitions (and Animations) aims to make obsolete.

Imagine the following:

A box, 100px wide by 50px tall. It has a background image, which is a  
CSS Sprite that contains 5 different states. The sprite is an image  
100px wide by 250px tall. When hovering, you want the background- 
position to go like this exactly:


(default) background-position: 0 0;

background-position: 0 -50px;
background-position: 0 -100px;
background-position: 0 -150px;
background-position: 0 -200px;
background-position: 0 -250px;


Explicitly in iterative steps of 50 pixels, and not as some kind of  
smooth transition that may hit up 0 -20px, or 0 -70px, etc.

The way the browser could implement this is via a hypothetical   
transition-iteration property (or alternative names: transition- 
interval / transition-step):

Name: 		transition-iteration
Value:   		auto | <number> | <length> | <percentage>
Initial:		auto
Applies to: 	block-level and inline-level elements
Inherited:  	no
Percentages: refer only to animatable properties that allow percentages
Media: 		visual
Computed value: Same as specified value.


If set to auto, transitions are smooth just like they are right now.  
If set to a number, length or percentage (which can only be used for  
corresponding properties that accept numbers, lengths and percentages  
respectively, or else it will be considered invalid syntax and resort  
back to auto), it calculates the exact steps and spreads them across  
the duration time of the animation. Any remaining number, length or  
percentage after the final iterated step would be omitted but the time  
calculation will smooth out the animation accordingly.

Am I still making sense? :)

The transition-iteration property could be added to the transition:  
shorthand property in any position, but it probably makes most sense  
to append it after transition-delay.

Looking forward to hearing other people's thoughts on this.

- Faruk