Bug 284551 – [scroll-animations] support attachment range keywords in keyframes (CSS and JS API)

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Animations

[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)

[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 ***