W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2017

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

From: Andreas Larsen via GitHub <sysbot+gh@w3.org>
Date: Sun, 14 May 2017 07:57:07 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-228525559-1494748626-sysbot+gh@w3.org>
larsenwork has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-timing] Extending frames() or steps() or adding a third option ==
## 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 I found the use case for a symmetrical timing function with discrete steps that doesn't include the first or last step e.g.:
```
linear-gradient(red, ???(2), blue)
```
where `???` is something similar to `steps` or `frames`. 

The use case could be transitioning between to sections with different `background-color`s 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 `}`

<img width="150" alt="screen shot 6" src="https://cloud.githubusercontent.com/assets/3859425/26032069/4968c6fe-388a-11e7-8e5d-032ad9a394a5.png">

## Suggestion
I don't have a good suggestion for naming (any ideas?) but it's been discussed in e.g. #1301 
A graph representation of the function looks like this:

<img width="300" alt="screen shot 6" src="https://cloud.githubusercontent.com/assets/3859425/26032019/c131cffc-3888-11e7-93b1-7215289ac342.png">


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1371 using your GitHub account
Received on Sunday, 14 May 2017 07:57:14 UTC

This archive was generated by hypermail 2.3.1 : Monday, 23 October 2017 10:12:53 UTC