[css-animations-2] there should be a way to set the effect-wide easing for a CSS Animation

Currently, the animation-timing-function property set on an element will set the default value for animation-timing-function for each keyframe of a @keyframes applied to that element. This means that there is no way to set the easing for an animation effect, only on its keyframes, thus not allowing authors to specify a CSS Animation with multiple keyframes with a single easing being applied throughout.

This always bugged me and resurfaced while discussing https://github.com/w3c/csswg-drafts/pull/6974 with @birtles.

One idea @birtles suggested in this conversation would be to add a new animation-effect-timing-function property which would apply animation-wide. This is a good suggestion.

An alternative I could think of would be to use the term easing since this is the name of the property used in the Web Animations specification and also the term used in the CSS Easings specification. Thus, we could introduce a new animation-easing property.

That property could apply to keyframes as well, where the animation-easing property would override the value set on the element for this particular keyframe. And if the animation-easing is set on either the element or a keyframe, then the animation-timing-function values would be completely disregarded, therefore deprecating that property in favor of the new animation-easing which I think would be more user-friendly.

Start by reading the CSS Animations 2 discussion and the linked CSS Easings specification, then review the conversation around PR 6974. Done means the open design choice is resolved and the effect-wide easing behavior, including its relationship to animation-timing-function, is specified clearly.