This is an attempt to make some progress on custom easing functions, specifically #229 (comment)

I've never edited a CSS spec before, so I don't really know what I'm doing. Sorry if this isn't helpful in any way. Here's what I'm trying to do:

Edit: I've updated this following discussion below.

There's already a linear keyword. I figured we could overload that, so linear is a shorthand for linear().

The arguments are a comma-separated groups of:

• Output (number)
• Start input (optional, percentage)
• End input (optional, percentage)

The values work very similar to linear-gradient.

linear(0, 0.7, 0.87, 0.98, 1) - this creates 5 points:

Which is equivalent to linear(0 0%, 0.7 25%, 0.87 50%, 0.98 75%, 1 100%), as points without a 'start input' are given one automatically (using the same process as linear gradients).

The third value, again similar to gradients, can be used to create an extra point using the same output value. So linear(0, 0.5 25% 75%, 1) creates 4 points:

Output values will typically be 0-1, but can be outside of that, as they can with cubic-bezier. A likely usage here will be elastic/spring easings.

Similarly, input values will typically be 0%-100%, but can extend beyond that to provide points for edge-cases where easings are chained.

The ends of the graph automatically extend beyond their specified point using their final angle, so the previous easing (linear(0, 0.5 25% 75%, 1)) would extend like this:

However, if the final two points are in the same position, the line extends horizontally, so linear(0, 0.5 25% 75%, 1 100% 100%) (the difference being the 100% 100% at the end), would be:

Some edge cases: linear() is equivalent to linear (as in, an identity function). If only one value is provided, then the output value is always that value, so linear(0.5) always outputs 0.5.

The overall goal is to allow something like:

.whatever {
  animation-timing-function: linear(0, 0.003, 0.013, 0.03, 0.05, 0.08, 0.11, 0.15, 0.2, 0.26, 0.31, 0.38, 0.45, 0.53, 0.62, 0.71, 0.81, 0.9, 0.99, 0.94, 0.89, 0.85, 0.82, 0.79, 0.77, 0.76, 0.752, 0.75, 0.755, 0.77, 0.78, 0.81, 0.84, 0.87, 0.92, 0.97, 0.99, 0.97, 0.95, 0.94, 0.938, 0.94, 0.949, 0.96, 0.99, 0.994, 0.986, 0.985, 0.989, 1 100% 100%);
}

…which would graph like this:

And here's a demo of how that would animate: https://static-misc-3.glitch.me/linear-easing/