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

Thanks for the pointer @birtles, I learned something new! And the terminology in the Web Animations spec suggests a few more potential names for a new CSS animation property:

- `animation-progress-function`
- `animation-effect-timing-function` (also suggested by @graouts)
- `animation-time-transform`

Personally, I'm starting to like the sound `animation-effect-timing-function`, because it hints that we could also introduce a new animation shorthand called `animation-effect` for specifying various effect-wide animation properties. 

Thus, in my initial example, this would look like:
```css
.my-element {
  animation-name: move;
  animation-effect-timing-function: linear(0 0%, 0.5 80%, 1 100%);
  animation-duration: 5s;
  /* or just... */
  animation-effect: move 5s linear(0 0%, 0.5 80%, 1 100%);
}

@keyframes move {
  from { translate: 0 0; }
  20% { translate: 100px 0; }
  to { translate: 300px 0; }
}
```
which would be semantically equivalent to the following Web Animations code:
```js
document.querySelector(".my-element").animate({
  translate: ["0 0", "100px 0", "300px 0"],
  offset: [0, 0.2, 1]
}, {
  easing: "linear(0 0%, 0.5 80%, 1 100%)",
  duration: 5000,
})
```


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


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

Received on Tuesday, 30 May 2023 06:39:43 UTC