Re: Proposal: Iterative steps for CSS Transitions

On Jan 11, 2009, at 9:58 AM, David Hyatt wrote:
> Can't this just be done with a new timing function value rather than  
> a new property?

Perhaps, but using a unit value as a timing function to accomplish  
this would prevent iterated transitions from having any easing applied  
to them. In the case of my original use case scenario, an easing curve  
might well be desired for it.

Unless you have a syntax in mind that wouldn't be confusing but would  
still allow for an easing curve to be specified as well? What I'm  
inclined to think of is this:

transition-timing-function: 50px ease-in;
transition: background-position 0.3s 50px ease-in;

It could work but I worry that the syntax would get confusing,  
especially since people will expect the "50px" to be its own property  
rather than part of the timing-function property.



Either way, what to do with the remainder? I propose smoothing the  
overall transition to accommodate for any remainder of an iterated  
transition, not showing the remainder but calculating its duration and  
adjusting each other step in the iteration accordingly. E.g.:

A box moves from left: 0px to left: 110px over a duration of 5s. The  
iterative step distance is set to 20px and the timing-function is  
linear; Over the course of the transition, the box hits up these  
positions: 0 (start), 20px, 40px, 60px, 80px, 100px, 110px  
(destination). The remainder in this case is a 10px transition (or  
gap); as a result, every other step is now 1/55th of a second shorter,  
or 0.9818181s.

Faruk

Received on Monday, 12 January 2009 19:16:27 UTC