From 8fd05786587615a730c5df82e5b92e94dea73491 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 12 Feb 2026 17:38:25 +0000 Subject: [PATCH 1/3] Add property data for scroll triggered animations --- css/properties.json | 209 +++++++++++++++++++++++++++++++++++++ css/properties.schema.json | 1 + css/syntaxes.json | 3 + l10n/css.json | 3 + 4 files changed, 216 insertions(+) diff --git a/css/properties.json b/css/properties.json index c1690a26b..55834cd8f 100644 --- a/css/properties.json +++ b/css/properties.json @@ -2020,6 +2020,22 @@ "status": "standard", "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timing-function" }, + "animation-trigger": { + "syntax": "[ none | [ + ]+ ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "no", + "groups": [ + "CSS Animations" + ], + "initial": "none", + "appliesto": "allElements", + "computed": "asSpecified", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-trigger" + }, "appearance": { "syntax": "none | auto | | ", "media": "all", @@ -11041,6 +11057,183 @@ "status": "experimental", "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-scope" }, + "timeline-trigger": { + "syntax": "none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> <'timeline-trigger-range'> [ '/' <'timeline-trigger-exit-range'> ]? ]#", + "media": "visual", + "inherited": false, + "animationType": [ + "timeline-trigger-name", + "timeline-trigger-source", + "timeline-trigger-range", + "timeline-trigger-exit-range" + ], + "percentages": "no", + "groups": [ + "CSS Animations" + ], + "initial": [ + "timeline-trigger-name", + "timeline-trigger-source", + "timeline-trigger-range", + "timeline-trigger-exit-range" + ], + "appliesto": "allElements", + "computed": [ + "timeline-trigger-name", + "timeline-trigger-source", + "timeline-trigger-range", + "timeline-trigger-exit-range" + ], + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger" + }, + "timeline-trigger-name": { + "syntax": "none | #", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "no", + "groups": [ + "CSS Animations" + ], + "initial": "none", + "appliesto": "allElements", + "computed": "asSpecified", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-name" + }, + "timeline-trigger-exit-range": { + "syntax": "[ <'timeline-trigger-exit-range-start'> <'timeline-trigger-exit-range-end'>? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": [ + "timeline-trigger-exit-range-start", + "timeline-trigger-exit-range-end" + ], + "groups": [ + "CSS Animations" + ], + "initial": [ + "timeline-trigger-exit-range-start", + "timeline-trigger-exit-range-end" + ], + "appliesto": "allElements", + "computed": [ + "timeline-trigger-exit-range-start", + "timeline-trigger-exit-range-end" + ], + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range" + }, + "timeline-trigger-exit-range-end": { + "syntax": "[ normal | | ? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline", + "groups": [ + "CSS Animations" + ], + "initial": "normal", + "appliesto": "allElements", + "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range-end" + }, + "timeline-trigger-exit-range-start": { + "syntax": "[ normal | | ? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline", + "groups": [ + "CSS Animations" + ], + "initial": "normal", + "appliesto": "allElements", + "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range-start" + }, + "timeline-trigger-range": { + "syntax": "[ <'timeline-trigger-range-start'> <'timeline-trigger-range-end'>? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": [ + "timeline-trigger-range-start", + "timeline-trigger-range-end" + ], + "groups": [ + "CSS Animations" + ], + "initial": [ + "timeline-trigger-range-start", + "timeline-trigger-range-end" + ], + "appliesto": "allElements", + "computed": [ + "timeline-trigger-range-start", + "timeline-trigger-range-end" + ], + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range" + }, + "timeline-trigger-range-end": { + "syntax": "[ normal | | ? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline", + "groups": [ + "CSS Animations" + ], + "initial": "normal", + "appliesto": "allElements", + "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range-end" + }, + "timeline-trigger-range-start": { + "syntax": "[ normal | | ? ]#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline", + "groups": [ + "CSS Animations" + ], + "initial": "normal", + "appliesto": "allElements", + "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range-start" + }, + "timeline-trigger-source": { + "syntax": "#", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "no", + "groups": [ + "CSS Animations" + ], + "initial": "auto", + "appliesto": "allElements", + "computed": "listOfNoneAutoIdentScrollOrView", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-source" + }, "top": { "syntax": "auto | | | ", "media": "visual", @@ -11265,6 +11458,22 @@ "status": "standard", "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/translate" }, + "trigger-scope": { + "syntax": "none | all | #", + "media": "visual", + "inherited": false, + "animationType": "notAnimatable", + "percentages": "no", + "groups": [ + "CSS Animations" + ], + "initial": "none", + "appliesto": "allElements", + "computed": "asSpecified", + "order": "perGrammar", + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/trigger-scope" + }, "unicode-bidi": { "syntax": "normal | embed | isolate | bidi-override | isolate-override | plaintext", "media": "visual", diff --git a/css/properties.schema.json b/css/properties.schema.json index 1714e6e21..a74ffe81d 100644 --- a/css/properties.schema.json +++ b/css/properties.schema.json @@ -159,6 +159,7 @@ "listEachItemHasTwoKeywordsOnePerDimension", "listEachItemIdentifierOrNoneAuto", "listEachItemTwoKeywordsOriginOffsets", + "listOfNoneAutoIdentScrollOrView", "noneOrImageWithAbsoluteURI", "noneOrOrderedListOfIdentifiers", "normalizedAngle", diff --git a/css/syntaxes.json b/css/syntaxes.json index 9959b7a2d..b15c5a658 100644 --- a/css/syntaxes.json +++ b/css/syntaxes.json @@ -44,6 +44,9 @@ "animateable-feature": { "syntax": "scroll-position | contents | " }, + "animation-action": { + "syntax": "none | play | play-once | play-forwards | play-backwards | pause | reset | replay" + }, "asin()": { "syntax": "asin( )" }, diff --git a/l10n/css.json b/l10n/css.json index 43f7458a8..12b44ae14 100644 --- a/l10n/css.json +++ b/l10n/css.json @@ -1219,6 +1219,9 @@ "zh-CN": "列表项", "zh-TW": "清單項目" }, + "listOfNoneAutoIdentScrollOrView": { + "en-US": "A list, with each item being either the keyword none, the keyword auto, a case-sensitive {{cssxref(\"<ident>\")}}, a computed {{cssxref(\"animation-timeline/scroll\")}} function, or a computed {{cssxref(\"animation-timeline/view\")}} function." + }, "listSeparator": { "de": ", ", "en-US": ", ", From fe84180b5332831fa74ec1a56dd12551e1c3f97e Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Thu, 12 Feb 2026 19:19:46 +0000 Subject: [PATCH 2/3] update the MDN URLs --- css/properties.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/css/properties.json b/css/properties.json index 55834cd8f..cb5b72ba3 100644 --- a/css/properties.json +++ b/css/properties.json @@ -2034,7 +2034,7 @@ "computed": "asSpecified", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-trigger" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-trigger" }, "appearance": { "syntax": "none | auto | | ", @@ -11086,7 +11086,7 @@ ], "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger" }, "timeline-trigger-name": { "syntax": "none | #", @@ -11102,7 +11102,7 @@ "computed": "asSpecified", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-name" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-name" }, "timeline-trigger-exit-range": { "syntax": "[ <'timeline-trigger-exit-range-start'> <'timeline-trigger-exit-range-end'>? ]#", @@ -11127,7 +11127,7 @@ ], "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-exit-range" }, "timeline-trigger-exit-range-end": { "syntax": "[ normal | | ? ]#", @@ -11143,7 +11143,7 @@ "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range-end" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-exit-range-end" }, "timeline-trigger-exit-range-start": { "syntax": "[ normal | | ? ]#", @@ -11159,7 +11159,7 @@ "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-exit-range-start" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-exit-range-start" }, "timeline-trigger-range": { "syntax": "[ <'timeline-trigger-range-start'> <'timeline-trigger-range-end'>? ]#", @@ -11184,7 +11184,7 @@ ], "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-range" }, "timeline-trigger-range-end": { "syntax": "[ normal | | ? ]#", @@ -11200,7 +11200,7 @@ "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range-end" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-range-end" }, "timeline-trigger-range-start": { "syntax": "[ normal | | ? ]#", @@ -11216,7 +11216,7 @@ "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-range-start" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-range-start" }, "timeline-trigger-source": { "syntax": "#", @@ -11232,7 +11232,7 @@ "computed": "listOfNoneAutoIdentScrollOrView", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-trigger-source" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-source" }, "top": { "syntax": "auto | | | ", @@ -11472,7 +11472,7 @@ "computed": "asSpecified", "order": "perGrammar", "status": "standard", - "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/trigger-scope" + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/trigger-scope" }, "unicode-bidi": { "syntax": "normal | embed | isolate | bidi-override | isolate-override | plaintext", From 95c97e7caf2090252d04ce2fcdc5729267e26b8e Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 13 Feb 2026 10:18:59 +0000 Subject: [PATCH 3/3] Correct syntax, add fr translation --- css/properties.json | 4 ++-- l10n/css.json | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/css/properties.json b/css/properties.json index cb5b72ba3..a72b990c8 100644 --- a/css/properties.json +++ b/css/properties.json @@ -11130,7 +11130,7 @@ "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-exit-range" }, "timeline-trigger-exit-range-end": { - "syntax": "[ normal | | ? ]#", + "syntax": "[ auto | normal | | ? ]#", "media": "visual", "inherited": false, "animationType": "notAnimatable", @@ -11146,7 +11146,7 @@ "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-trigger-exit-range-end" }, "timeline-trigger-exit-range-start": { - "syntax": "[ normal | | ? ]#", + "syntax": "[ auto | normal | | ? ]#", "media": "visual", "inherited": false, "animationType": "notAnimatable", diff --git a/l10n/css.json b/l10n/css.json index 12b44ae14..78ea2ea0f 100644 --- a/l10n/css.json +++ b/l10n/css.json @@ -1220,7 +1220,8 @@ "zh-TW": "清單項目" }, "listOfNoneAutoIdentScrollOrView": { - "en-US": "A list, with each item being either the keyword none, the keyword auto, a case-sensitive {{cssxref(\"<ident>\")}}, a computed {{cssxref(\"animation-timeline/scroll\")}} function, or a computed {{cssxref(\"animation-timeline/view\")}} function." + "en-US": "A list, with each item being either the keyword none, the keyword auto, a case-sensitive {{cssxref(\"<ident>\")}}, a computed {{cssxref(\"animation-timeline/scroll\")}} function, or a computed {{cssxref(\"animation-timeline/view\")}} function.", + "fr": "Une liste dont chaque élément est soit le mot-clé none, le mot-clé auto, un identifiant ({{CSSxRef(\"<ident>\")}}), sensible à la casse, une fonction calculée {{CSSxRef(\"animation-timeline/scroll\")}} ou une fonction calculée {{CSSxRef(\"animation-timeline/view\")}}." }, "listSeparator": { "de": ", ",