- From: Bramus via GitHub <sysbot+gh@w3.org>
- Date: Fri, 20 Sep 2024 08:30:16 +0000
- To: public-css-archive@w3.org
After reading #10879, maybe we should allow `<length-percentage>` inside `<keyframe-selector>` in general, to open up the `scroll-timeline` case as well?
```css
@keyframes f {
0% { translate: 0% 0%; } /* ✅ Allowed */
150px { translate: 0% -100%; } /* ❌ Not allowed */
}
el {
animation-name: f;
animation-timeline: scroll();
}
```
_(These are the keyframes for something like [this shrinking header](https://scroll-driven-animations.style/demos/shrinking-header-shadow/css/) that animates using the `animation-range` `0px 150px`)_
If we don’t want this extra addition, the [current proposal](https://github.com/w3c/csswg-drafts/issues/10000#:~:text=name%3E%20%3Clength%2Dpercentage%3E%3F%20%5D%23-,Proposed%20Solution,-Allow%20%3Clength%2Dpercentage) can already work if we enable `scroll` to target the full range of the `ScrollTimeline` (see request [here](https://github.com/w3c/csswg-drafts/issues/9367#issuecomment-1905788011)):
```css
@keyframes f {
scroll 0% { translate: 0% 0%; } /* ✅ Allowed */
scroll 150px { translate: 0% -100%; } /* ❌ Not allowed */
}
el {
animation-name: f;
animation-timeline: scroll();
}
```
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10000#issuecomment-2363164955 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 20 September 2024 08:30:17 UTC