- From: Noam Rosenthal via GitHub <sysbot+gh@w3.org>
- Date: Tue, 24 Sep 2024 12:28:23 +0000
- To: public-css-archive@w3.org
I love the use cases and the direction!
One thing that struck me is that perhaps the center point can be the 0 of the timeline rather than the 50%? point and everything can expand from there? Then the keyframes could have 2 values (center->out) instead of 3 (out-in-out).
Then the CSS can look like this:
```css
@keyframes move-x {
to { translate: 50%; }
}
@keyframes move-y {
to { translate: 0 50%; }
}
.container {
pointer-timeline: --x x, --y y;
}
.figure {
animation: move-x linear auto both, move-y linear auto both;
animation-composition: replace, add;
animation-timeline: --x, --y;
/* alternatively with the anonymous timeline */
animation-timeline: pointer(x nearest), pointer(y nearest);
animation-range: cover from target 50%, cover from target 50%;
}
```
--
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10574#issuecomment-2371133376 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 24 September 2024 12:28:24 UTC