Re: [csswg-drafts] [css-animations] Proposal: Add a way to make the animation timing function apply to the whole animation (#8881)

> I don't want to sound too negative but I'm afraid that having `animation-effect` on keyframes affect the iteration easing would introduce cyclic dependencies (you need to apply the iteration easing to determine which keyframes to look up) and would require a fairly thorough redesign of the animation architecture

That is a great point. I can almost imagine an implementation that allows cyclic dependencies if the current keyframe was allowed to "lag" behind the current easing, but you're right that that would probably be more of a developer footgun, and infeasible for the current animation architecture.

> I've been on the receiving end of several bug reports along the lines of "it seem to slow down in the middle" due to this problem

Exactly, the problem lies in that all the other animation properties apply effect-wide, i.e. `animation-duration` describes the duration of the whole animation, and modifying it within a keyframe has no effect. However, `animation-timing-function` can be overridden within keyframes, and it seems to be the **only** animation property that describes the behavior per keyframe.

So given that cascading `animation-easing` may introduce cyclic dependencies, I retract that it should be able to be overridden within keyframes. However, I still think it should only be used for setting the effect-wide easing. It would align the property behavior with the other animation properties, leaving only `animation-timing-function` as the exception that developers can still reach for if they need to adjust the easing between keyframes. In other words, I think:
```css
.my-element {
  animation: move 5s linear;
  animation-easing: linear(0 0%, 0.5 80%, 1 100%);
}

@keyframes move {
  from { 
    translate: 0 0; 
    animation-timing-function: ease-in;
    animation-easing: ease-in-out; /* ⚠ invalid, no effect */
  }
  20% { translate: 100px 0; }
  to { translate: 300px 0; }
}
```
should be semantically equivalent to:
```js
document.querySelector(".my-element").animate([
  { translate: "0 0", easing: "ease-in" },
  { translate: "100px 0", easing: "linear", offset: 0.2 }
  { translate: "300px 0", easing: "linear" }
], {
  easing: "linear(0 0%, 0.5 80%, 1 100%)",
  duration: 5000,
})
```

> Sorry for the stop energy there but I'm not sure that's a practical option.

No worries, I really appreciate your participation in this conversation! I'm very new to Web spec discussions and I'm learning a lot from you.



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


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

Received on Wednesday, 31 May 2023 17:39:51 UTC