Support all `animation-timing-function` values in the `animation` shorthand

[bramus]

The polyfill can’t handle this:

animation: reveal cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
animation-timeline: scroll();

Switching the animation-timing-function to a value of linear works fine:

animation: reveal linear both;
animation-timeline: scroll();

[bramus]

The culprit seems to be that the css parser uses a list of predetermined keywords defined in ANIMATION_KEYWORDS. This list does not cater for the cubic-bezier, steps, or linear functions.

EDIT: The code path that uses ANIMATION_KEYWORDS is not invoked anywhere, so that’s not the cause.

[bramus]

As a workaround, authors can define linear in the shorthand, and then override the animation-timing-function using the longhand:

animation: reveal linear both;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* 👈 Override linear from the shorthand with the needed value */
animation-timeline: scroll();