- From: Bramus! via GitHub <sysbot+gh@w3.org>
- Date: Tue, 25 Jul 2023 00:55:42 +0000
- To: public-css-archive@w3.org
Since we can nowadays define alternative animation timelines with `animation-timeline`, a slightly different approach to this issue could be to create some sort of `HoverTimeline` which authors can use.
```css
@property --pointer-x { … }
@property --pointer-y { … }
@keyframes track-x-value {
from { --pointer-x: -1; }
to { --pointer-y: 1; }
}
@keyframes track-y-value {
from { --pointer-y: -1; }
to { --pointer-y: 1; }
}
el {
animation: track-x-value auto linear, track-y-value auto linear;
animation-timeline: hover(vertical), hover(horizontal); /* 👈 THIS */
transform: rotate3d(
var(--pointer-y),
var(--pointer-x),
0,
-15deg
);
}
```
See https://codepen.io/bramus/full/porJLgR for a demo that could be simplified using this.
/cc @ydaniv who was interested in this type of timeline.
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6733#issuecomment-1648812218 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 25 July 2023 00:55:44 UTC