Closed Bug 1764126 Opened 3 years ago Closed 2 years ago

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

Categories

(Core :: CSS Transitions and Animations, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
103 Branch
Tracking Status
firefox103 --- fixed

People

(Reporter: dholbert, Assigned: dshin)

References

(Blocks 1 open bug, )

Details

(Keywords: dev-doc-complete)

Attachments

(5 files, 2 obsolete files)

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

Component: CSS Parsing and Computation → CSS Transitions and Animations

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

Assignee: nobody → dshin
Status: NEW → ASSIGNED

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

Keywords: dev-doc-needed

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

Blocks: css-easing-2
Summary: [css-easing-1] Implement linear(...) easing function for css animations → [css-easing-2] Implement linear(...) easing function for css animations

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

Keywords: leave-open

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.

Attachment #9274061 - Attachment is obsolete: true
Attachment #9274041 - Attachment is obsolete: true
Depends on: 1766886
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/cf05b212060d Part 1: Implement piecewise linear function. r=emilio
Regressions: 1768301
Depends on: 1770217

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

Pushed by ealvarez@mozilla.com: 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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34326 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot

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?

Flags: needinfo?(dshin)

Hm, agreed. bug 1773327 filed.

Flags: needinfo?(dshin)
Blocks: 1773493
Keywords: leave-open
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Blocks: 1773549
Pushed by dshin@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/813b088f59e6 Part 5: Enable `linear(...)` timing function on C++ side, r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34382 for changes under testing/web-platform/tests
Status: REOPENED → RESOLVED
Closed: 2 years ago2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 103 Branch
Upstream PR merged by moz-wptsync-bot
See Also: → 1775335
See Also: → 1775351
See Also: → 1776422
Blocks: 1776422
See Also: 1776422
Blocks: 1776424
Blocks: 1776460

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

See Also: → 1780038

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.
Flags: needinfo?(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.
Flags: needinfo?(dshin)

(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

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: