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).

From recent discussions with Boris: this will probably involve mostly parsing, ToCSS(), making sure nsTimingFunction and ComputedTimingFunction work, and adding WPTs.

I assume, this function will initially be implemented behind a flag, though it should probably still be documented on MDN once available. So I've set the dev-doc-needed flag.

Sebastian

And one more thing. The CSSWG resolution says that this will be part of level 2 of the spec. So I've updated the summary accordingly.
It is actually already specified. Though without Jake's changes it's just the keyword that is defined.

I've also created a meta-bug for CSS Easing 2 now, so the global progress on the specification can be tracked.

Sebastian

(In reply to Daniel Holbert [:dholbert] from comment #1)

From recent discussions with Boris: this will probably involve mostly parsing, ToCSS(), making sure nsTimingFunction and ComputedTimingFunction work, and adding WPTs.

Yap. Feel free to ask me or other layout members if you have any question about CSS animations. :)

cross-fade() was kinda doing this in its own way with PercentOrNone, but
since now we have more use-cases for this we should probably make this a
slightly more general solution.

I added some convenience APIs, but they're unused as of this patch so
let me know if you want them gone.

Comment on attachment 9274061 [details]
Bug 1764126 - Introduce Optional<T> to represent optional values in the style system. r=dshin

Revision D144831 was moved to bug 1766655. Setting attachment 9274061 [details] to obsolete.

https://hg.mozilla.org/mozilla-central/rev/cf05b212060d

Add LinearFunction to TimingFunction. Because the linear function is a
variable list of linear stops, the enum is no longer Copyable.

Depends on D146837

Depends on D146838

https://hg.mozilla.org/mozilla-central/rev/919b3fc0713d
https://hg.mozilla.org/mozilla-central/rev/737c9006f020
https://hg.mozilla.org/mozilla-central/rev/512e2707c3a3

Sorry for the drive by, but these tests should really live under css-easing since that's the spec that will define this. Any chance of a follow up to refactor these tests to move them there and follow the style there?

Hm, agreed. bug 1773327 filed.

https://hg.mozilla.org/mozilla-central/rev/813b088f59e6

Is this implementation behind a flag?

Also, from the source "spec doesn't specify which way these steps should be continuous", I think the spec makes that clear now https://drafts.csswg.org/css-easing-2/#linear-easing-function-output - if there are multiple outputs for the same input, the last wins.

(In reply to Jake Archibald from comment #25)

Is this implementation behind a flag?

Yep, the flag is called layout.css.linear-easing-function.enabled.

Sebastian

Hello David, I'll be updating docs for the linear() easing function.

Thanks for adding this to the experimental feature list! I have a few questions:

1. To confirm, though this bug was fixed in 103, the update in the "experimental feature list" suggests that it was available by default in nightly in 104. For my curiosity, was this available in nightly in 103 (and in beta and developer edition) but behind the preference?

2. The preference name layout.css.linear-easing-function.enabled is slightly confusing. That's because the documented syntax from the spec already contains <linear-easing-function>.

   • What <linear-easing-function> really refers to is the linear keyword. Is that correct? This section here on Linear functions should really call it out as Linear keyword.
   • And now through this bug fix, the linear() function has been added, right? This is the one for which I'll update documentation.

1. Yes, it was there in for 103 behind the pref in some working capacity, but 104 brings it to up-to-date with the latest spec.
2. You're right. That was an adjustment in spec going from Easing 1 to Easing 2.

(In reply to David Shin[:dshin] from comment #28)

1. Yes, it was there in for 103 behind the pref in some working capacity, but 104 brings it to up-to-date with the latest spec.
2. You're right. That was an adjustment in spec going from Easing 1 to Easing 2.

Thank you

Doc updates for this feature can be tracked here: https://github.com/mdn/content/issues/19709