New CSS reference: Keyframe selectors (mdn#42573)

estelle · dipikabh · chrisdavidmills · web-flow · commit a397ab763a66 · 2026-01-07T13:08:12.000+01:00
* New CSS reference: Keyframe selectors

* make it plural

* example height"

* force

* force

* force

* ick

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya &lt;dipika@foss-community.org&gt;
Co-authored-by: Chris Mills &lt;chrisdavidmills@gmail.com&gt;

* Update files/en-us/web/css/reference/selectors/keyframe/index.md

* Update files/en-us/web/css/guides/scroll-driven_animations/index.md

Co-authored-by: Dipika Bhattacharya &lt;dipika@foss-community.org&gt;

* Update files/en-us/web/css/guides/syntax/error_handling/index.md

Co-authored-by: Dipika Bhattacharya &lt;dipika@foss-community.org&gt;

* Update files/en-us/web/css/guides/syntax/error_handling/index.md

Co-authored-by: Dipika Bhattacharya &lt;dipika@foss-community.org&gt;

* Update files/en-us/web/css/reference/selectors/keyframe/index.md

* rename slug

* Update files/en-us/web/css/reference/selectors/keyframe_selectors/index.md

Co-authored-by: Chris Mills &lt;chrisdavidmills@gmail.com&gt;

---------

Co-authored-by: Dipika Bhattacharya &lt;dipika@foss-community.org&gt;
Co-authored-by: Chris Mills &lt;chrisdavidmills@gmail.com&gt;
diff --git a/files/en-us/web/api/csskeyframerule/keytext/index.md b/files/en-us/web/api/csskeyframerule/keytext/index.md
@@ -8,7 +8,7 @@ browser-compat: api.CSSKeyframeRule.keyText
 
 {{APIRef("CSSOM") }}
 
-The **`keyText`** property of the {{domxref("CSSKeyframeRule")}} interface represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.
+The **`keyText`** property of the {{domxref("CSSKeyframeRule")}} interface represents the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.
 
 ## Value
 
diff --git a/files/en-us/web/api/csskeyframesrule/deleterule/index.md b/files/en-us/web/api/csskeyframesrule/deleterule/index.md
@@ -19,7 +19,7 @@ deleteRule(select)
 ### Parameters
 
 - `select`
-  - : A string which contains the keyframe selector of the rule to be deleted, which must be:
+  - : A string which contains the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) of the rule to be deleted, which must be:
     - a comma-separated list of percentage values between 0% and 100%;
     - or, the keywords `from` or `to`
 
diff --git a/files/en-us/web/api/csskeyframesrule/findrule/index.md b/files/en-us/web/api/csskeyframesrule/findrule/index.md
@@ -19,7 +19,7 @@ findRule(select)
 ### Parameters
 
 - `select`
-  - : A string which contains the keyframe selector of the rule to be found, which must be:
+  - : A string which contains the [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) of the rule to be found, which must be:
     - a comma-separated list of percentage values between 0% and 100%;
     - or, the keywords `from` or `to`
 
diff --git a/files/en-us/web/css/guides/animations/index.md b/files/en-us/web/css/guides/animations/index.md
@@ -250,6 +250,7 @@ The CSS animations module level 2 also introduces the `animation-trigger`, `anim
 ### At-rules and descriptors
 
 - {{cssxref("@keyframes")}}
+- [`<keyframe-selector>`](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors)
 
 ### Events
 
diff --git a/files/en-us/web/css/guides/scroll-driven_animations/index.md b/files/en-us/web/css/guides/scroll-driven_animations/index.md
@@ -146,7 +146,8 @@ Scroll the element in the inline direction to see its background color change. S
 
 - [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
   - {{cssxref("animation-timeline")}}
-  - {{cssxref("@keyframes")}}
+  - {{cssxref("@keyframes")}} at-rule
+  - [`<keyframe-selector>`](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors)
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
   - {{glossary("Scroll container")}}
   - [Scrollport](/en-US/docs/Glossary/Scroll_container#scrollport)
diff --git a/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md b/files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md
@@ -320,7 +320,7 @@ The {{cssxref("view-timeline-inset")}} arguments specify insets (if positive) or
 
 Unlike the scroll timeline's `scroll()` function, there is no `<scroller>` argument in the `view()` function, as the view timeline always tracks the subject within its nearest ancestor scroll container.
 
-In this example, as we are using inset values, we can use the `from` and `to` keyframe selectors.
+In this example, as we are using inset values, we can use the `from` and `to` [keyframe selectors](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors).
 
 ```css live-sample___anon_view_args
 @keyframes action {
diff --git a/files/en-us/web/css/guides/selectors/index.md b/files/en-us/web/css/guides/selectors/index.md
@@ -189,6 +189,9 @@ The CSS selectors module also introduces the {{CSSXref(":blank")}}, {{CSSXref(":
 - Other [pseudo-elements](/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements)
   - {{CSSxRef("::cue")}}
 
+- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations)
+  - [`<keyframe-selector>`](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors)
+
 - {{CSSXref("@namespace")}} at-rule
 
 - {{cssxref("important", "!important")}}
diff --git a/files/en-us/web/css/guides/syntax/error_handling/index.md b/files/en-us/web/css/guides/syntax/error_handling/index.md
@@ -37,7 +37,7 @@ After parsing each declaration, style rule, at-rule, and so on, the browser chec
 
 ### At-rule errors
 
-The `@` symbol, known in CSS specifications as an `<at-keyword-token>`, indicates the beginning of a CSS {{cssxref("at-rule")}}. Once an at-rule begins with the `@` symbol, nothing is considered invalid from the parser's standpoint. Everything up to the first semi-colon (`;`) or the opening curly brace (`{`) is part of the at-rule's prelude. The content of each at-rule is interpreted according to the grammar rules for that particular at-rule.
+The `@` symbol, known in CSS specifications as an `<at-keyword-token>`, indicates the beginning of a CSS [at-rule](/en-US/docs/Web/CSS/Reference/At-rules). Once an at-rule begins with the `@` symbol, nothing is considered invalid from the parser's standpoint. Everything up to the first semi-colon (`;`) or the opening curly brace (`{`) is part of the at-rule's prelude. The content of each at-rule is interpreted according to the grammar rules for that particular at-rule.
 
 Statement at-rules, such as {{cssxref("@import")}} and {{cssxref("@namespace")}} declarations, contain just a prelude. The semicolon ends the at-rule immediately for [statement at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules#statement_at-rules). If the contents of the prelude are invalid according to the grammar for that at-rule, the at-rule is ignored, with the browser continuing to parse CSS after it encounters the next semi-colon. For example, if an `@import` at-rule occurs after any CSS declaration other than `@charset`, `@layer` or other `@import` statements, the `@import` declaration is ignored.
 
@@ -52,15 +52,15 @@ Different at-rules have different grammar rules, different (or no) descriptors,
 
 For example, the `@font-face` rule requires both a [`font-family`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-family) and [`src`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face/src) descriptor. If either of these is omitted or invalid, the entire `@font-face` rule is invalid. Including an unrelated descriptor, any other valid font descriptor with an invalid value, or a property style declaration within the `@font-face` nested block will not invalidate the font declaration. As long as the font name and font source are included and valid, any invalid CSS within the at-rule is ignored, but the `@font-face` block is still parsed.
 
-While the grammar of the `@keyframes` at-rule is very different from the `@font-face` rule grammar, the type of error still impacts what gets ignored. Important declarations (marked with the {{cssxref("important")}} flag) and properties that can't be animated are ignored in keyframe rules, but they don't impact other styles declared in the same keyframe selector block. Including an invalid keyframe selector (such as a percentage value less than `0%` or greater than `100%`, or a {{cssxref("number")}} omitting the `%`) invalidates the keyframe selector list and therefore the style block is ignored. An invalid keyframe selector only invalidates the invalid selector's style block; it does not invalidate the entire `@keyframes` declaration. Including styles between two keyframe selector blocks, on the other hand, will invalidate the entire `@keyframes` at-rule.
+While the grammar of the `@keyframes` at-rule is very different from the `@font-face` rule grammar, the type of error still impacts what gets ignored. Important declarations (marked with the {{cssxref("important")}} flag) and properties that can't be animated are ignored in keyframe rules, but they don't impact other styles declared in the same [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors) block. Including an invalid keyframe selector (such as a percentage value less than `0%` or greater than `100%`, or a {{cssxref("number")}} omitting the `%`) invalidates the keyframe selector list and therefore the style block is ignored. An invalid keyframe selector only invalidates the invalid selector's style block; it does not invalidate the entire `@keyframes` declaration. Including styles between two keyframe selector blocks, on the other hand, will invalidate the entire `@keyframes` at-rule.
 
 Some at-rules are almost always valid. The {{cssxref("@layer")}} at-rule comes in both regular and nested forms. The `@layer` statement syntax contains just the prelude, ending with a semi-colon. Alternatively, the nested syntax has layer styles nested between curly braces coming after the prelude. Omitting a closing curly brace may be a logic error but is not a syntax error. In the case of a missing closing brace in `@layer`, any styles coming after where the closing brace should have been are parsed as being in the cascade layer defined in the at-rule's prelude. The CSS is valid as there are no syntax errors; nothing is discarded. A syntax error may cause the named or anonymous layer to be empty, but the layer is still created.
 
 ### Errors in selector lists
 
 There are many ways you might make a mistake writing a selector, but only invalid selectors cause a selector list to be invalid (See [invalid selector list](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#invalid_selector_list)).
 
-If you include a {{cssxref("class_selectors", "class")}}, {{cssxref("id_selectors", "id")}}, or {{cssxref("type_selectors", "type")}} selector for a class, id, or element (or custom element) that doesn't exist, it may be a logic error but it's not a syntax error. However, if you have a typo in a pseudo-class or a pseudo-element, it might create an invalid selector, which is an error the parser needs to address.
+If you include a [class selector](/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors), an [id_selectors](/en-US/docs/Web/CSS/Reference/Selectors/ID_selectors), or a [type selector](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors) for a class, id, or element (or custom element) that doesn't exist, it may be a logic error but it's not a syntax error. However, if you have a typo in a pseudo-class or a pseudo-element, it might create an invalid selector, which is an error the parser needs to address.
 
 If a selector list contains any invalid selectors, then the entire style block is ignored. There are exceptions: if the invalid selector is within an {{cssxref(":is")}} or {{cssxref(":where")}} pseudo-class (which accept [forgiving selector lists](/en-US/docs/Web/CSS/Reference/Selectors/Selector_list#forgiving_selector_list)) or if the unknown selector is a [`-webkit-` prefixed pseudo-element](#-webkit-_exception), only the unknown selector is ignored as not matching anything. The selector list is not invalidated.
 
diff --git a/files/en-us/web/css/reference/at-rules/@keyframes/index.md b/files/en-us/web/css/reference/at-rules/@keyframes/index.md
@@ -37,7 +37,7 @@ The **`@keyframes`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Gu
 
 ## Description
 
-To use keyframes, create a `@keyframes` rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.
+To use keyframes, create a `@keyframes` rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of [keyframe selectors](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors), which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.
 
 You can list the keyframe percentages in any order; they will be handled in the order they should occur.
 
diff --git a/files/en-us/web/css/reference/properties/animation-range/index.md b/files/en-us/web/css/reference/properties/animation-range/index.md
@@ -252,7 +252,7 @@ Scroll to see the element being animated.
 
 {{EmbedLiveSample("Examples", "100%", "480px")}}
 
-Note how the `from`, or `0%`, keyframe property values are not applied to the animated element until the top block border edge is `10%` past the container's bottom edge; it is full size, fully opaque, and magenta. At that point, the animation is applied and it is styled with the values defined by the `0%` keyframe selector. When the `animation-range-end` is reached, 25% from the top of the scrollport, it jumps back to its original styling.
+Note how the `from`, or `0%`, keyframe property values are not applied to the animated element until the top block border edge is `10%` past the container's bottom edge; it is full size, fully opaque, and magenta. At that point, the animation is applied and it is styled with the values defined by the `0%` [keyframe selector](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors). When the `animation-range-end` is reached, 25% from the top of the scrollport, it jumps back to its original styling.
 
 Generally, you will want to set `animation-fill-mode: both` when creating [scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations). The jump to the default state occurs because we did not set the {{cssxref("animation-fill-mode")}} property on the element, which can be used to apply an animation's styles to an element before and after the animation's execution. We initially omitted the property in this example to better enable visualizing the effects of `animation-range`.
 
diff --git a/files/en-us/web/css/reference/selectors/keyframe_selectors/index.md b/files/en-us/web/css/reference/selectors/keyframe_selectors/index.md
