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

I'm not sure, I think the cascading thing is a footgun. In my experience I see people writing:

```
div {
  animation: keyframes 1s ease-in;
}

@keyframes keyframes {
  50% { translate: 50px; }
  to { translate: 0px; }
}
```

and expecting the `ease-in` to apply to the whole thing. 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, some of the reports being from browser engineers themselves.

I think it's better to be explicit. If you specify `animation-easing` on a keyframe, it applies to that keyframe (and has no effect on the iteration easing). If you specify it on the element/animation, it applies to the whole animation iteration. That happens to be identical to Web Animations which reduces the barriers involved in moving between the two.

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 to support the extra coupling between animation effect timing and keyframe effects, and between the timing model and animation model. Sorry for the stop energy there but I'm not sure that's a practical option.

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8881#issuecomment-1569747842 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 08:37:32 UTC