overlay, starting-style, discrete animations (#688)

<!-- 🙌 Thanks for contributing! Adding details below will help us to
merge your PR faster. -->

### Description

#### Summary

This PR adds multiple related features that go together to enable the
creation of exit/entrance animations using simple CSS, or to put it
another way, animating to/from `display: none`, or animating elements
when they have just been added to the DOM.

Specifically, these are:

-
[`@starting-style`](https://chromestatus.com/feature/4515377717968896):
Chrome 117
- [The `overlay`
property](https://chromestatus.com/feature/5138724910792704): Chrome 117
- [Animating to/from `display: none` and `content-visibility:
hidden`](https://chromestatus.com/feature/5154958272364544): Chrome 116
- [The `transition-behavior`
property](https://chromestatus.com/feature/5071230636392448): Chrome 117
(this was already added, but it is related, so I checked it)

See my [research
document](https://docs.google.com/document/d/1esudzJfl1xpALiPDJ5cdISWGT4zvhZOsiixSriqc_sk/edit)
for more details of what this project aims to add.

<!-- ✍️ Summarize your changes in one or two sentences -->

### Motivation

<!-- ❓ Why are you making these changes and how do they help? -->

### Additional details

<!-- 🔗 Link to documentation, bug trackers, source control, or other
places providing more context -->

### Related issues and pull requests

<!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" -->
<!-- 👉 Highlight related pull requests using "Relates to #123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends
on:** #123" -->

css/at-rules.json

@@ -478,6 +478,17 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@scroll-timeline"
   },
+  "@starting-style": {
+    "syntax": "@starting-style {\n  <declaration-list> | <group-rule-body>\n}",
+    "interfaces": [
+      "CSSStartingStyleRule"
+    ],
+    "groups": [
+      "CSS Animations"
+    ],
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@starting-style"
+  },
   "@supports": {
     "syntax": "@supports <supports-condition> {\n  <group-rule-body>\n}",
     "interfaces": [

css/properties.json

@@ -4483,7 +4483,7 @@
     "syntax": "visible | auto | hidden",
     "media": "all",
     "inherited": false,
-    "animationType": "notAnimatable",
+    "animationType": "discreteHiddenSwapAt0",
     "percentages": "no",
     "groups": [
       "CSS Containment"
@@ -4582,7 +4582,7 @@
     "syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
     "media": "all",
     "inherited": false,
-    "animationType": "notAnimatable",
+    "animationType": "discreteNoneSwapAt0",
     "percentages": "no",
     "groups": [
       "CSS Display"
@@ -7594,6 +7594,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/overflow-y"
   },
+  "overlay": {
+    "syntax": "none | auto",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "discreteSwapAt1",
+    "percentages": "no",
+    "groups": [
+      "CSS Positioning"
+    ],
+    "initial": "none",
+    "appliesto": "allElements",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/overlay"
+  },
   "overscroll-behavior": {
     "syntax": "[ contain | none | auto ]{1,2}",
     "media": "visual",
@@ -9614,19 +9630,37 @@
       "transition-delay",
       "transition-duration",
       "transition-property",
-      "transition-timing-function"
+      "transition-timing-function",
+      "transition-behavior"
     ],
     "appliesto": "allElementsAndPseudos",
     "computed": [
       "transition-delay",
       "transition-duration",
       "transition-property",
-      "transition-timing-function"
+      "transition-timing-function",
+      "transition-behavior"
     ],
     "order": "orderOfAppearance",
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transition"
   },
+  "transition-behavior": {
+    "syntax": "<transition-behavior-value>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Transitions"
+    ],
+    "initial": "normal",
+    "appliesto": "allElements",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transition-behavior"
+  },
   "transition-delay": {
     "syntax": "<time>#",
     "media": "interactive",

css/properties.schema.json

@@ -21,6 +21,9 @@
         "byComputedValueTypeNormalAnimatesAsObliqueZeroDeg",
         "color",
         "discrete",
+        "discreteHiddenSwapAt0",
+        "discreteNoneSwapAt0",
+        "discreteSwapAt1",
         "eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection",
         "filterList",
         "fontStretch",

css/syntaxes.json

@@ -756,7 +756,7 @@
     "syntax": "auto | none | <dashed-ident> | <scroll()> | <view()>"
   },
   "single-transition": {
-    "syntax": "[ none | <single-transition-property> ] || <time> || <easing-function> || <time>"
+    "syntax": "[ none | <single-transition-property> ] || <time> || <easing-function> || <time> || <transition-behavior-value>"
   },
   "single-transition-property": {
     "syntax": "all | <custom-ident>"
@@ -836,6 +836,9 @@
   "transform-list": {
     "syntax": "<transform-function>+"
   },
+  "transition-behavior-value": {
+    "syntax": "normal | allow-discrete"
+  },
   "translate()": {
     "syntax": "translate( <length-percentage> , <length-percentage>? )"
   },

l10n/css.json

@@ -654,6 +654,15 @@
     "fr": "discrète",
     "ja": "離散値"
   },
+  "discreteHiddenSwapAt0": {
+    "en-US": "Discrete behavior but when animating from <code>hidden</code> swaps to end value at progress > 0 rather than 0.5"
+  },
+  "discreteNoneSwapAt0": {
+    "en-US": "Discrete behavior but when animating from <code>none</code> swaps to end value at progress > 0 rather than 0.5"
+  },
+  "discreteSwapAt1": {
+    "en-US": "Discrete behavior but swaps to end value at progress 1 rather than 0.5"
+  },
   "eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection": {
     "de": "wie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer {{cssxref(\"unicode-bidi\")}} und {{cssxref(\"direction\")}})",
     "en-US": "as each of the properties of the shorthand (all properties but {{cssxref(\"unicode-bidi\")}} and {{cssxref(\"direction\")}})",