[css3-animations] Ability to have "adjacent" keyframes / "instantaneous" interpolations

Right now, there's no good way to produce "instantaneous" transitions
in a @keyframes rule.  The best you can do is something like "50%
{...} 50.001% {...}".  This is obviously not great: if you go too far
with the zeros, you run into browser precision issues and accidentally
specify two identical keyframe selectors; and it's technically
possible for a user to land between the two keyframes with a *very*
well-timed "animation-play-state: paused;" application, or as we add
more ways to control the progress of an animation, such as via script.

You can hack around the issue a bit by using
"animation-timing-function: step-start;" in the first keyframe, so it
at least flips immediately to the next value without a transition in
the middle, but this is hacky and non-obvious.  It also is still
subject to the "too many zeros" problem, if you're trying to minimize
the size of the "dead zone" between the two keyframes.

Any chance of us allowing a way to specify that a frame is "epsilon"
greater than another, such that it should produce an instantaneous
transition?  (Note that you can already get this functionality in one
specific case - for a repeating transition, the 100% value
instantaneously flips to the 0% value.)

As an initial terrible syntax suggestion, perhaps extend a keyframe
simple selector from:

"from | to | <percentage>"

to

"[ from | to | <percentage> ] [ + epsilon ]?"

So you'd write my original example as "50% {...} 50% + epsilon {...}".

(Not sure if you need the ability to do "- epsilon" - it would let you
put something immediately before the 100%, but I don't see any use for
that.)

~TJ

Received on Friday, 16 November 2012 01:22:51 UTC