[css-easing-2] Implement linear(...) easing function for css animations
Categories
(Core :: CSS Transitions and Animations, enhancement)
Tracking
()
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).
Reporter | ||
Updated•2 years ago
|
Reporter | ||
Comment 1•2 years ago
|
||
From recent discussions with Boris: this will probably involve mostly parsing, ToCSS()
, making sure nsTimingFunction and ComputedTimingFunction work, and adding WPTs.
Assignee | ||
Updated•2 years ago
|
Comment 2•1 year ago
|
||
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•1 year ago
|
||
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•1 year ago
|
||
(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. :)
Assignee | ||
Updated•1 year ago
|
Assignee | ||
Comment 5•1 year ago
|
||
Comment 6•1 year ago
|
||
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•1 year ago
|
||
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.
Updated•1 year ago
|
Assignee | ||
Comment 8•1 year ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/cf05b212060d Part 1: Implement piecewise linear function. r=emilio
Comment 10•1 year ago
|
||
bugherder |
Assignee | ||
Comment 11•1 year ago
|
||
Add LinearFunction to TimingFunction. Because the linear function is a
variable list of linear stops, the enum is no longer Copyable.
Assignee | ||
Comment 12•1 year ago
|
||
Depends on D146837
Assignee | ||
Comment 13•1 year ago
|
||
Depends on D146838
Comment 14•1 year ago
|
||
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
Comment 16•1 year ago
|
||
bugherder |
Upstream PR merged by moz-wptsync-bot
Comment 18•1 year ago
|
||
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?
Assignee | ||
Updated•1 year ago
|
Assignee | ||
Comment 20•1 year ago
|
||
Updated•1 year ago
|
Updated•1 year ago
|
Comment 21•1 year ago
|
||
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
Comment 23•1 year ago
|
||
bugherder |
Upstream PR merged by moz-wptsync-bot
Assignee | ||
Updated•1 year ago
|
Comment 25•1 year ago
|
||
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•1 year ago
|
||
(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•1 year ago
|
||
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:
-
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?
-
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 thelinear
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.
- What
Comment 29•1 year ago
|
||
Comment 30•1 year ago
|
||
Doc updates for this feature can be tracked here: https://github.com/mdn/content/issues/19709
Description
•