[css-timing] Extending frames() or steps() or adding a third option

[larsenwork]

Reference

Steps: https://www.w3.org/TR/web-animations/#timing-in-discrete-steps
Frames: https://www.w3.org/TR/web-animations/#issue-fc1dd2fc

Background

Using timing functions for in gradients (#1332) I found a use case for a symmetrical timing function with discrete steps that doesn't include the first or last step e.g.:

linear-gradient(steelblue, ???(3), yellowgreen)

where ??? is something similar to steps or frames.

The use case could be transitioning between to sections with different background-colors where you want to control precisely where the gradient starts and stops visually. E.g. from steelblue to yellowgreen where the gradient is happing at the }

Suggestion

Add a timing function that has a graph that looks like this (bottom left) compared to steps(N, start), steps(N, end) and frames():

I don't have a good suggestion for naming (any ideas?) but it's related to the discussion in e.g. #1301

From a programming perspective all the graph examples should have a N value of 4 and a option describing the range, e.g. from top left: steps(4, openclosed), steps(4, closedopen), steps(4, open), steps(4, closed), but I know that would make no sense to a lot of designers.

[tabatkins]

We resolved to add a keyword to steps() with this behavior, so closing now. #1680 tracks the remaining naming issue.