Bugzilla

This bug covers implementation of the CSS `linear(...)` animation-timing-function, to allow for more complex animation timelines (e.g. physics-like, for "bounce" effects).

There's a draft spec here:
https://github.com/w3c/csswg-drafts/pull/6533
...which I think we could start implementing sometime soon.

Quoting that github issue:

> 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:
> https://user-images.githubusercontent.com/93594/130435372-05471f97-7e33-4876-ac45-cc7073eb1f5c.png
> And here's a demo of how that would animate: https://static-misc-3.glitch.me/linear-easing/

There's a chance the syntax might change as the spec gets more solid (e.g. `linear-easing()` was brought up as an alternate name), but we can address any such changes in followups as-needed pretty easily (before letting this ship to release).

This bug covers implementation of the CSS `linear(...)` animation-timing-function, to allow for more complex animation timelines (e.g. physics-like, for "bounce" effects).

There's a draft spec here:
https://github.com/w3c/csswg-drafts/pull/6533
...which I think we could start implementing sometime soon.

Quoting that github pull-request:

> 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:
> https://user-images.githubusercontent.com/93594/130435372-05471f97-7e33-4876-ac45-cc7073eb1f5c.png
> And here's a demo of how that would animate: https://static-misc-3.glitch.me/linear-easing/

There's a chance the syntax might change as the spec gets more solid (e.g. `linear-easing()` was brought up as an alternate name), but we can address any such changes in followups as-needed pretty easily (before letting this ship to release).