W3C home > Mailing lists > Public > www-style@w3.org > November 2012

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 15 Nov 2012 17:22:03 -0800
Message-ID: <CAAWBYDCpKVW7ooDuyZqTJBa-ATtqjOY9cYvZU1tXR7ym9BTjYw@mail.gmail.com>
To: www-style list <www-style@w3.org>
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>"


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

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:23 UTC