1764126 - [css-easing-2] Implement linear(...) easing function for css animations

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, enhancement)

Description

[Daniel Holbert [:dholbert]]

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

Comment 1

[Daniel Holbert [:dholbert]]

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

Comment 2

[Sebastian Zartner [:sebo]]

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

Comment 3

[Sebastian Zartner [:sebo]]

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

Comment 4

[Boris Chiou [:boris]]

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

Comment 5

[David Shin[:dshin]]

Attachment: Bug 1764126 Part 1: Separate out generic `PercentOrNone` out of `cross-fade`. r=emilio

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1764126 - Introduce Optional<T> to represent optional values in the style system. r=dshin

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 7

[Phabricator Automation]

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.

Comment 8

[David Shin[:dshin]]

Attachment: Bug 1764126 - Part 1: Implement piecewise linear function. r=emilio

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cf05b212060d
Part 1: Implement piecewise linear function. r=emilio

Comment 10

[Cosmin Sabou [:CosminS]]

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

Comment 11

[David Shin[:dshin]]

Attachment: Bug 1764126 - Part 2: Rust side plumbing work for linear easing function. r=emilio

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

Comment 12

[David Shin[:dshin]]

Attachment: Bug 1764126 - Part 3: Hook up linear easing calculation for servo and expose it to C++. r=emilio

Depends on D146837

Comment 13

[David Shin[:dshin]]

Attachment: Bug 1764126 - Part 4: Add parsing for linear easing function and gate it behind pref. r=emilio

Depends on D146838

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/919b3fc0713d
Part 2: Rust side plumbing work for linear easing function. r=emilio
https://hg.mozilla.org/integration/autoland/rev/737c9006f020
Part 3: Hook up linear easing calculation for servo and expose it to C++. r=emilio
https://hg.mozilla.org/integration/autoland/rev/512e2707c3a3
Part 4: Add parsing for linear easing function and gate it behind pref. r=emilio

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34326 for changes under testing/web-platform/tests

Comment 16

[Iulian Moraru]

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

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 18

[Brian Birtles (:birtles)]

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?

Comment 19

[David Shin[:dshin]]

Hm, agreed. bug 1773327 filed.

Comment 20

[David Shin[:dshin]]

Attachment: Bug 1764126 - Part 5: Enable `linear(...)` timing function on C++ side, r=emilio

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/813b088f59e6
Part 5: Enable `linear(...)` timing function on C++ side, r=emilio

Comment 22

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34382 for changes under testing/web-platform/tests

Comment 23

[Narcis Beleuzu [:NarcisB]]

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

Comment 24

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 25

[Jake Archibald]

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.

Comment 26

[Sebastian Zartner [:sebo]]

(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

Comment 27

[Dipika]

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.

Comment 28

[David Shin[:dshin]]

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.

Comment 29

[Dipika]

(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

Comment 30

[Dipika]

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