Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

larsenwork opened this Issue May 14, 2017 · 1 comment


None yet
3 participants
Copy link

larsenwork commented May 14, 2017




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 }

screen shot 6


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

screen shot 6

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.


This comment has been minimized.

Copy link

tabatkins commented Aug 2, 2017

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

@tabatkins tabatkins closed this Aug 2, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.