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

Closed
larsenwork opened this Issue May 14, 2017 · 1 comment

Comments

Projects
None yet
3 participants
@larsenwork
Copy link

larsenwork commented May 14, 2017

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 }

screen shot 6

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():

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.

@tabatkins

This comment has been minimized.

Copy link
Member

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.