284551 2024-12-12 07:30:24 -0800 [scroll-animations] support attachment range keywords in keyframes (CSS and JS API) 2025-02-20 01:51:43 -0800 1 1 1 Unclassified WebKit Animations WebKit Nightly Build Unspecified Unspecified RESOLVED DUPLICATE 286920 InRadar P2 Normal --- 284532 284533 284538 1 graouts webkit-unassigned graouts webkit-bug-importer oldest_to_newest 2081180 0 graouts 2024-12-12 07:30:24 -0800 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) 2081181 1 webkit-bug-importer 2024-12-12 07:31:06 -0800 <rdar://problem/141358265> 2081516 2 graouts 2024-12-13 08:46:26 -0800 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 2096293 3 graouts 2025-02-20 01:51:43 -0800 *** This bug has been marked as a duplicate of bug 286920 ***