Bug 284551
| Summary: | [scroll-animations] support attachment range keywords in keyframes (CSS and JS API) | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Antoine Quint <graouts> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | graouts, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 284532, 284533, 284538 | ||
Antoine Quint
The @keyframes rule in CSS and the `offset` property in the Web Animations JS API are extended to support attachment range keywords for Scroll-driven Animations.
The spec at https://drafts.csswg.org/scroll-animations-1/#named-range-keyframes extends `<keyframe-selector>` to contain `<timeline-range-name> <percentage>`. The spec at https://drafts.csswg.org/web-animations-2/#keyframe-offset-type details how this works with the Web Animations JavaScript API.
This feature affects several known demos of Scroll-driven Animations:
- https://scroll-driven-animations.style/demos/contact-list/css/ (bug 284532)
- https://scroll-driven-animations.style/demos/contact-list/waapi/ (bug 284533)
- https://codepen.io/utilitybend/pen/RwqBymL (bug 284538)
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/141358265>
Antoine Quint
Here are two tests specifically testing this on the Web Animations JavaScript API side:
- scroll-animations/view-timelines/get-keyframes-with-timeline-offset.html
- scroll-animations/view-timelines/timeline-offset-in-keyframe.html
And here are tests for the CSS @keyframes rule:
- scroll-animations/css/merge-timeline-offset-keyframes.html
- scroll-animations/css/timeline-offset-in-keyframe-change-timeline.tentative.html
- scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
- scroll-animations/css/timeline-offset-keyframes-with-document-timeline.html
- scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
- scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
- scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html
- scroll-animations/css/named-range-keyframes-with-document-timeline.tentative.html
Antoine Quint
*** This bug has been marked as a duplicate of bug 286920 ***