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

Why not have the same logic as the canvas gradient stops?
quote:

If multiple stops are added at the same offset on a gradient, they must be
placed in the order added, with the first one closest to the start of the
gradient, and each subsequent one infinitesimally further along towards the
end point (in effect causing all but the first and last stop added at each
point to be ignored).


So keyframes can then contain:

from {...}

50% {...}
50% {...}
to {...}

and you'd animate from 0 to the first 50% and then from the second 50% to
the end

On Thu, Nov 15, 2012 at 5:22 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

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