[css-easing-2] Custom curve-based easing functions

[jakearchibald]

#229 was solved with linear(), which allows easings to be defined by a series of points that are linearly interpolated.

Many easings are curve-based, so there's space for a more efficient syntax that allows curves to be defined.

Some ideas/points from #229:

• cubic-bezier() isn't great, since it's a 2D concept that's being applied to something that's fundamentally 1D. [css-easing-2] Complex easing/timing functions #229 (comment)
• Piecewise cubic splines [css-easing-2] Complex easing/timing functions #229 (comment)
• Could use SVG paths, but would need to do something about the case where one input has many outputs [css-easing-2] Complex easing/timing functions #229 (comment)
• Could join multiple cubic-bezier() functions together [css-easing-2] Complex easing/timing functions #229 (comment)
• More cubic-spline() ideas [css-easing-2] Complex easing/timing functions #229 (comment)

[tabatkins]

To finish out the list of currently-suggested additional easing ideas:

• spring(): "bouncy" easing. Dean's suggestion produces its own duration; other variants can be duration-independent.
• JS-driven easing: use a JS function (takes an input number, produces an output number) to drive an easing
• midpoint(): reproducing the easing behavior of gradients, so easing functions can be integrated into gradients more smoothly
• stacking easing functions: applying one, then sending that value to another
• chaining easing functions: hooking several together end-to-end, like successive cubic-beziers
• math-based easing: like custom-easing(sin(p)), a calculation with a calc variable p for the progress
• smooth: a new cubic-bezier keyword that auto-computes based on surrounding easings in a keyframe animation to produce a c1-continuous curve

Agenda+ to discuss at TPAC, to see if we want to pursue any of these right now, or defer them.