Re: Proposal: Iterative steps for CSS Transitions

Can't this just be done with a new timing function value rather than a  
new property?

dave

On Jan 10, 2009, at 12:45 AM, Faruk Ateş wrote:

> 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