W3C home > Mailing lists > Public > www-style@w3.org > January 2009

Re: Proposal: Iterative steps for CSS Transitions

From: Giovanni Campagna <scampa.giovanni@gmail.com>
Date: Mon, 12 Jan 2009 21:02:11 +0100
Message-ID: <65307430901121202p2cdc8d46r6d57bd8ce8c1f47@mail.gmail.com>
To: www-style@w3.org
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
(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.


(PS: when complex timing is required, maybe it is more indicated to use a
language specifically designed for it, ie SMIL and maybe timesheets)
Received on Monday, 12 January 2009 20:02:48 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC