[css-easing] "smooth" (C1-continuous) easing between keyframes

[tabatkins]

In today's CSSWG meeting, @svgeesus brought up the problem that interpolation between keyframes today is exclusively pair-wise. At the transition point from one pair to another, the animation curve will often be discontinuous, causing a potentially jarring velocity change. Authors can manually adjust for this to a degree by writing cubic-bezier() curves, but it's non-trivial and they have to readjust them every time they tweak the animation.

Based on the discussion between Chris, myself, and @flackr, I suggest we add an easing keyword smooth, which automatically computes an interpolation that is C1-continuous with neighboring pairs. It's been a while since I've been in the literature for this, but I think this can be done with a single bezier segment, so long as the neighboring segments are also bezier (and they are, or can be pretended to be in the case of step). (IIRC, you set the first control point to be the reflection of the preceding curve's second control point, and the second to be the reflection of the following curve's first control point?) Others will probably know the details better than me.

SVG tried to add a curve type that does this via Catmull-Rom curves, see Shepers' blog post.

[birtles]

There is a lot of discussion about this in #229

[tabatkins]

Well, kinda. I've re-skimmed the thread and don't see anything about automatic continuous easing, but there are indeed some useful concepts discussed in there. Hermite splines, in particular, seem to be potentially relevant.

[birtles]

There's quite a bit there if you expand the comments, like the smooth-cubic-bezier proposal, the various auto keywords (you need to expand the comments twice to see this bit) but maybe I misunderstand the nature of this proposal.

[tabatkins]

To follow up, what I meant was that if you have three segments in your animation, and you supply an easing for the first and third, you could use smooth to automatically get a c1-continuous cubic bezier that connects the two. You'd just interpret the easings on either side as cubic beziers, then do the control-point flipping to generate the middle one.

Potentially you could chain smooth across several segments to have it generate a single bezier which is then automatically chopped for the segments, so you could like do a fast ramp and a slow finish by hand in the first and and last segments, then use a bunch of smooth in the middle to automatically get the equivalent of a whole-animation ease, just spread across the keyframes automatically.

If it lacked a preceding or following, those would just put the control point at 0,0 and 1,1; it lacked both, it could just act like ease or something.