Skip to content

Commit eb3bd6b

Browse files
fix: descriptions of discrete animation behavior between visible and hidden (#690)
<!-- 🙌 Thanks for contributing! Adding details below will help us to merge your PR faster. --> ### Description In #688, part of the work was to add descriptions of the new specific animation behavior of certain "discrete" animated properties — `display`, `content-visibility`, and `overlay` — when animating from a hidden state or a visible state. However, on talking to some Chrome engineering folks about this, I realized that some of my descriptions were not quite right. This PR aims to fix those descriptions. The description I was sent by the Chrome engineering folk is as follows: "The idea behind "p = 1" is that during transitions between certain values for certain properties which we consider invisible to visible or vice versa, the browser will automatically choose the "visible" option for the duration of the animation it creates. For example, if you transition from "display:none" to "display:block", the element will be "display:block" for the entire animation created by the transition. And likewise if you transition from "display:block" to "display:none", the element will be "display:block" for the entire animation created by the transition. However, if you transition from "display:flex" to "display:block", the element's display value will switch halfway through the animation. This behavior is applied to content-visibility:hidden, display:none, visibility:hidden, and overlay:none." <!-- ✍️ 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" -->
1 parent 52037c4 commit eb3bd6b

File tree

3 files changed

+9
-13
lines changed

3 files changed

+9
-13
lines changed

css/properties.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4483,7 +4483,7 @@
44834483
"syntax": "visible | auto | hidden",
44844484
"media": "all",
44854485
"inherited": false,
4486-
"animationType": "discreteHiddenSwapAt0",
4486+
"animationType": "discreteButVisibleForDurationWhenAnimatedHidden",
44874487
"percentages": "no",
44884488
"groups": [
44894489
"CSS Containment"
@@ -4582,7 +4582,7 @@
45824582
"syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
45834583
"media": "all",
45844584
"inherited": false,
4585-
"animationType": "discreteNoneSwapAt0",
4585+
"animationType": "discreteButVisibleForDurationWhenAnimatedNone",
45864586
"percentages": "no",
45874587
"groups": [
45884588
"CSS Display"
@@ -7619,7 +7619,7 @@
76197619
"syntax": "none | auto",
76207620
"media": "visual",
76217621
"inherited": false,
7622-
"animationType": "discreteSwapAt1",
7622+
"animationType": "discreteButVisibleForDurationWhenAnimatedNone",
76237623
"percentages": "no",
76247624
"groups": [
76257625
"CSS Positioning"

css/properties.schema.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@
2121
"byComputedValueTypeNormalAnimatesAsObliqueZeroDeg",
2222
"color",
2323
"discrete",
24-
"discreteHiddenSwapAt0",
25-
"discreteNoneSwapAt0",
26-
"discreteSwapAt1",
24+
"discreteButVisibleForDurationWhenAnimatedHidden",
25+
"discreteButVisibleForDurationWhenAnimatedNone",
2726
"eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection",
2827
"filterList",
2928
"fontStretch",

l10n/css.json

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -654,14 +654,11 @@
654654
"fr": "discrète",
655655
"ja": "離散値"
656656
},
657-
"discreteHiddenSwapAt0": {
658-
"en-US": "Discrete behavior but when animating from <code>hidden</code> swaps to end value at progress > 0 rather than 0.5"
657+
"discreteButVisibleForDurationWhenAnimatedHidden": {
658+
"en-US": "Discrete behavior except when animating to or from <code>hidden</code> is visible for the entire duration"
659659
},
660-
"discreteNoneSwapAt0": {
661-
"en-US": "Discrete behavior but when animating from <code>none</code> swaps to end value at progress > 0 rather than 0.5"
662-
},
663-
"discreteSwapAt1": {
664-
"en-US": "Discrete behavior but swaps to end value at progress 1 rather than 0.5"
660+
"discreteButVisibleForDurationWhenAnimatedNone": {
661+
"en-US": "Discrete behavior except when animating to or from <code>none</code> is visible for the entire duration"
665662
},
666663
"eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection": {
667664
"de": "wie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer {{cssxref(\"unicode-bidi\")}} und {{cssxref(\"direction\")}})",

0 commit comments

Comments
 (0)