Skip to content

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

@tabatkins

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions