[csswg-drafts] The implicit keyframes (0% and 100%) if specified keyframes use <timeline-range-name> (#13872)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== The implicit keyframes (0% and 100%) if specified keyframes use <timeline-range-name> ==
I noticed the section of generating frames in [processing keyframes in [css-animations-2]](https://drafts.csswg.org/css-animations-2/#keyframe-processing) is not clear after we introduce timeline range name keyframe selector.

> Find or create the initial keyframe, a [keyframe](https://drafts.csswg.org/web-animations-1/#keyframe) with a keyframe offset of 0%, default timing function as its keyframe timing function, and default composite as its keyframe composite.
> ...
> Repeat for final keyframe, using an offset of 100%, considering keyframes positioned later in the [used keyframe order](https://drafts.csswg.org/css-animations-2/#used-keyframe-order), and appending to keyframes.

If we define a keyframes rule which includes some `<timeline-range-name>`s in keyframe selectors, e.g.
```
@keyframes anim {
  10% { width: 10px; }
  cover 10% { height: 10px; }
  cover 100% { margin-left: 10px; }
  cover 10% { width: 20px; }
}
```
And when we use `getKeyframes()` to check the keyframe objects in the computed order, the returned keyframes in Blink are:
```
0: {offset: 0, computedOffset: 0, …}
1: {offset: 0.1, computedOffset: 0.1,…}
2: {offset: { offset: CSSUnitValue {value: 10, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 0.1, …}
3: {offset: { offset: CSSUnitValue {value: 100, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 1, …}
```
There are 4 keyframes, and it generated the implicit 0% keyframe. No generated 100% keyframes because `cover 100%` has 100% computedOffset.

However, WebKit returned:
```
0: {..., offset: 0, computedOffset: 0, …}
1: {..., offset: 0.1, computedOffset: 0.1, …}
2: {..., offset: 1, computedOffset: 1, …}
3: {..., offset: { offset: CSSUnitValue {value: 10, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 0.1, …}
4: {..., offset: { offset: CSSUnitValue {value: 100, unit: 'percent'}, rangeName: 'cover'}, computedOffset: 1, ...}
```
There are 5 keyframes, and it generated both 0% and 100% implicit keyframes.

The spec only says we have to find keyframe offset 0% and 100% (instead of `computedOffset`), so I am confused about this. Should we have to generate the implicit frames if we can find a keyframe (with range names) whose `computedOffset` is 0% or 100%?

Also, about the computed order, per spec:
> The computed order of keyframes—​which is the order returned by [getKeyframes()](https://drafts.csswg.org/web-animations-1/#dom-keyframeeffect-getkeyframes)—​is found by shifting any keyframes whose offset was specified as a `<percentage>`, from keyword, or to keyword to the front of the list (after the generated initial keyframe, if any), and performing a stable sort on these keyframes by their keyframe offsets.

And there is a NOTE:
> Although the [computed keyframe order](https://drafts.csswg.org/css-animations-2/#computed-keyframe-order) sorts keyframes with [<percentage>](https://drafts.csswg.org/css-values-4/#percentage-value) offsets, it maintains keyframes specified with a `<timeline-range-name>` in their [specified keyframe order](https://drafts.csswg.org/css-animations-2/#specified-keyframe-order)—​after any `<percentage>` keyframes (other than a generated final keyframe), even if these come later in the [used keyframe order](https://drafts.csswg.org/css-animations-2/#used-keyframe-order).

So the spec requires us to put the keyframes with `<timeline-range-name>` after keyframs with `<percentage>` (other than the generated final keyframe). So should we put the generated final keyframe after keyframes with `<timeline-range-name>`? However, it seems Blink and WebKit don't follow this. Should we remove the `other than a generated final keyframe` from the spec because no browser follows it? Or perhaps I misread this.

Thanks.

cc @kevers-google @graouts 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13872 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 30 April 2026 20:13:55 UTC