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

• Component: Animations
• Status: RESOLVED FIXED

[Tim Nguyen (:ntim)]

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/

[Radar WebKit Bug Importer]

<rdar://problem/93088094>

[Jake Archibald]

I've pushed the spec for this https://drafts.csswg.org/css-easing-2/#the-linear-easing-function.

[Devin Rousso]

Pull request: https://github.com/WebKit/WebKit/pull/15936

[EWS]

Committed 266195@main (2b0ebfa3b59e): <https://commits.webkit.org/266195@main>

Reviewed commits have been landed. Closing PR #15936 and removing active labels.

[Antoine Quint]

I expect the changes made in 266196@main are not dealing with accelerated animations. Indeed, CoreAnimation doesn’t have any native equivalent to linear() so we’ll have to either find something that matches and add code to translate to the CA-native primitive or expand KeyframeEffect::canBeAccelerated() to do something similar to what we do with steps(). I argue for the latter because with the work for threaded animation resolution support for linear() will be free and I think it’s not a good idea to add more CA-specific code.

Filed bug 260136.