- From: Dennis Kats via GitHub <sysbot+gh@w3.org>
- Date: Tue, 30 May 2023 06:39:41 +0000
- To: public-css-archive@w3.org
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