Bug 205488 – [Web Animations] CSS `animation-timing-function` not respected in `getComputedTiming()`

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: Animations

[Devin Rousso]

Created attachment 386180 [details]
[HTML] Reduction

See attached reduction.

The visual effect appears to respect the CSS `animation-timing-function`, but the JavaScript value logged from `getComputedTiming()` always shows `"linear"`.

[Antoine Quint]

This is actually correct. The "animation-timing-function" property will affect the easing value on individual keyframes, Chrome and Firefox behave the same as well. I agree this is not intuitive, but CSS Animations define that animation-timing-function is really a shorthand for defining that property on each set of keyframes, per https://drafts.csswg.org/css-animations-1/#animation-timing-function:

"The animation-timing-function property describes how the animation will progress between each pair of keyframes. Timing functions are defined in the separate CSS Easing Functions module [css-easing-1]."

As such, you'll get the value specified through getKeyframes(), but an actual animation-wide timing function is not something that can be set via CSS Animations properties.