Re: Proposal: Iterative steps for CSS Transitions

2009/1/12 Faruk Ateş <faruk@apple.com>

>
> 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
>

What about a more general way of Animation keyframes, something like:
@keyframe 'stepped-transition' {
25% {
value: <one-quarter-the-value>;
animation-timing-function: instantly;
}
50% {
value: <half-the-value>;
animation-timing-function: instantly;
}
75% {
value: <three-quarters-the-value>;
animation-timing-function: instantly;
}
}
This needs two additional values for transition-timing-function and
animation-timing-function: "instantly" keyword, ie. the value is changed
immediately between keyframes or between start and end values (as no
transition / animation was specified at all) and the "keyframe" function,
which allows to load a keyframe by name, thus replacing the animation-name
property.
(Instantly could also be replaced by instantly-before --> new value for all
keyframe and instantly-after --> new value immediately after keyframe, just
before next keyframe)
In addition, because transition, differently from animation, have no
intrinsic knowledge of start and end states, a new property called "value",
which accept only percentages, may be allowed into keyframes, to actually
specify the steps.

Maybe it is a bit complicated, but IMHO it can be very powerful.

Giovanni


(PS: when complex timing is required, maybe it is more indicated to use a
language specifically designed for it, ie SMIL and maybe timesheets)