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

> 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.

I think more detail is needed about what exactly is meant by "disregarded". I believe what you intend is that the default `animation-timing-function` becomes `linear` unless an alternative is specified in an `animation-easing` rule for a particular keyframe. However, we would only be able to do this if `animation-easing` was set to a non-initial value, and given that the default effect-wide easing is linear, linear would be a good choice, except that then the following would not actually result in a linear animation:

```css
.target {
  animation: my-animation 1s;
  animation-easing: linear;
}
```

So I think to do this we would have to have an `auto` value which would compute equivalent to linear except that it wouldn't trigger ignoring `animation-timing-function`.

For a slightly different proposal, we could treat `animation-easing` as a set-to-linear shorthand for `animation-timing-function`. This would mean that having `animation-easing` listed would set `animation-timing-function` to `linear`, but it could be subsequently overridden if the developer wanted to give a different keyframe easing. This is similar to other reset-only shorthand properties.

E.g. an author could explicitly reset the `animation-timing-function` after `animation-easing`:
```css
.target {
  animation: my-animation 1s; /* animation-timing-function is initially ease as always */
  animation-easing: steps(10); /* implicitly sets animation-timing-function to linear. */
  animation-timing-function: ease; /* explicitly sets animation-timing-function back to ease. */
}
```

One challenge about this entire space is that it will still be difficult to add the effect-wide easing to the animation shorthand since it would have to come second there anyways without some other syntax to specify that you want to set the effect-wide easing.

E.g.
```css
.target {
  animation: my-animation 1s ease steps(10);
}
```

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6982#issuecomment-1783337713 using your GitHub account


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

Received on Friday, 27 October 2023 18:27:58 UTC