[csswg-drafts] [css-animations-2] there should be a way to set the effect-wide easing for a CSS Animation (#6982)

graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [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](https://drafts.csswg.org/css-easing/) 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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6982 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 24 January 2022 11:15:52 UTC