feat: Editorial review: Add content for overlay and discrete animation features #29943

chrisdavidmills · 2023-10-31T17:07:05Z

Description

This PR is for the editorial review of #29049, which was kindly tech-reviewed by @josepharhar.

Description

This PR adds content for 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 (this includes top layer elements like popovers), or animating elements when they have just been added to the DOM.

Specifically, these are:

@starting-style: Chrome 117
The overlay property: Chrome 117
Animating to/from display: none and content-visibility: hidden: Chrome 116
The transition-behavior property: Chrome 117

Motivation

Additional details

Related issues and pull requests

github-actions · 2023-10-31T17:10:17Z

Preview URLs (12 pages)

External URLs (3)

URL: /en-US/docs/Web/CSS/transition-behavior
Title: transition-behavior

https://developer.chrome.com/blog/entry-exit-animations/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/overlay
Title: overlay

https://developer.chrome.com/blog/entry-exit-animations/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/@starting-style
Title: @starting-style

https://developer.chrome.com/blog/entry-exit-animations/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-11-20 15:25:17)

files/en-us/web/api/popover_api/using/index.md

files/en-us/web/css/@starting-style/index.md

files/en-us/web/css/content-visibility/index.md

files/en-us/web/api/popover_api/using/index.md

estelle · 2023-11-15T23:03:31Z

files/en-us/web/css/transition-behavior/index.md

+  transition:
+    opacity 0.7s,
+    transform 0.7s,
+    overlay 0.7s allow-discrete,
+    display 0.7s allow-discrete;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */


Suggested change

transition:

opacity 0.7s,

transform 0.7s,

overlay 0.7s allow-discrete,

display 0.7s allow-discrete;

/* Equivalent to

transition: all 0.7s allow-discrete; */

transition-property: opacity, transform, overlay, display;

transition-duration: 0.7s;

transition-behavior: allow-discrete;

/* Using the shorthand `transition` property, we would write:

transition:

opacity 0.7s,

transform 0.7s,

overlay 0.7s allow-discrete,

display 0.7s allow-discrete;

or, even:

transform: 0.7s allow-discrete;

*/

i have to insist that the property be used in the examples

OK, thanks. I'm fine with this suggestion as we are showing the shorthand equivalents in the comment. I've mostly used your suggestion, but with a bit of tweaking to the prose; I've also fixed the ultra-compact shorthand suggestion.

estelle · 2023-11-15T23:44:37Z

files/en-us/web/html/element/dialog/index.md

@@ -49,7 +49,7 @@ This example demonstrates the create a non-modal dialog by using only HTML. Beca

 #### Result

-{{EmbedLiveSample("Caveats_of_creating_a_dialog_using_only_HTML", "100%", 200)}}
+{{EmbedLiveSample("HTML-only_dialog", "100%", 200)}}


There links to these anchors need to be updated

I've grepped through the repo and can't find anywhere that links to this. Have you found a particular instance that is wrong?

line 192 (and the other link is a few lines lower) on this page

Ah, sorry about that; I managed to totally miss it. Fixed now.

estelle · 2023-11-15T23:49:37Z

files/en-us/web/html/element/dialog/index.md

+- [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule
+  - : Provides a set of starting values for properties set on the `<dialog>` that you want to transition from when it is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type.
+- [`display`](/en-US/docs/Web/CSS/display) property
+  - : Add `display` to the transitions list so that the `<dialog>` will remain as `display: block` for the duration of the transition, ensuring the other transitions are visible.


Suggested change

- : Add `display` to the transitions list so that the `<dialog>` will remain as `display: block` for the duration of the transition, ensuring the other transitions are visible.

- : Add `display` to the transitions list so that the `<dialog>` will remain as `display: block` (or other visible `display` value set on the dialog's open state) for the duration of the transition, ensuring the other transitions are visible.

estelle · 2023-11-15T23:52:07Z

files/en-us/web/html/element/dialog/index.md

+When animating `<dialog>`s with CSS transitions, the following features are required:
+
+- [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule
+  - : Provides a set of starting values for properties set on the `<dialog>` that you want to transition from when it is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type.


Suggested change

- : Provides a set of starting values for properties set on the `<dialog>` that you want to transition from when it is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type.

- : Provides a set of starting values for properties set on the `<dialog>` that you want to transition from every time the dialog is opened. This is needed to avoid unexpected behavior. By default, CSS transitions only occur when a property changes from one value to another on a visible element; they are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type.

estelle · 2023-11-15T23:53:54Z

files/en-us/web/html/element/dialog/index.md

+
+body,
+button {
+  font-family: system-ui;
+}


Suggested change

body,

button {

font-family: system-ui;

}

Sure; removed.

OnkarRuikar · 2023-11-16T14:13:50Z

files/en-us/web/html/element/dialog/index.md

+
+##### CSS
+
+In the CSS, we include a `@starting-style` block that defines the transition starting styles for the `opacity` and `transform` properties, transition end styles on the `dialog[open]` state, and default styles on the default `dialog` state to transition back to once the `<dialog>` has appeared. Note how the the `<dialog>`'s `transition` list includes not only these properties, but also the `display` and `overlay` properties, each with `allow-discrete` set on them.


Suggested change

In the CSS, we include a `@starting-style` block that defines the transition starting styles for the `opacity` and `transform` properties, transition end styles on the `dialog[open]` state, and default styles on the default `dialog` state to transition back to once the `<dialog>` has appeared. Note how the the `<dialog>`'s `transition` list includes not only these properties, but also the `display` and `overlay` properties, each with `allow-discrete` set on them.

In the CSS, we include a `@starting-style` block that defines the transition starting styles for the `opacity` and `transform` properties, transition end styles on the `dialog[open]` state, and default styles on the default `dialog` state to transition back to once the `<dialog>` has appeared. Note how the `<dialog>`'s `transition` list includes not only these properties, but also the `display` and `overlay` properties, each with `allow-discrete` set on them.

Fixed; thanks!

OnkarRuikar · 2023-11-16T14:22:09Z

files/en-us/web/css/css_transitions/using_css_transitions/index.md

+}
+```
+
+Note the `@starting-style` block used to specify the starting style for the transition, and the inclusion of the `display` property in the trainsitions list, with `allow-discrete` set on it.


Suggested change

Note the `@starting-style` block used to specify the starting style for the transition, and the inclusion of the `display` property in the trainsitions list, with `allow-discrete` set on it.

Note the `@starting-style` block used to specify the starting style for the transition, and the inclusion of the `display` property in the transitions list, with `allow-discrete` set on it.

OnkarRuikar · 2023-11-16T14:45:42Z

files/en-us/web/css/overlay/index.md

+
+The code renders as follows:
+
+{{ EmbedLiveSample("Animating a popover", "100%", "200") }}


Suggested change

{{ EmbedLiveSample("Animating a popover", "100%", "200") }}

{{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}

Here section heading doesn't match. Even though it works now but may fail mysteriously in future.

Ah, good catch; thanks! Fixed in next commit.

OnkarRuikar · 2023-11-16T14:49:22Z

files/en-us/web/css/transition-behavior/index.md

+
+The code renders as follows:
+
+{{ EmbedLiveSample("Animating a popover", "100%", "200") }}


Suggested change

{{ EmbedLiveSample("Animating a popover", "100%", "200") }}

{{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}

OnkarRuikar · 2023-11-16T15:28:14Z

files/en-us/web/css/transition-property/index.md

-  transition-property: font-size;
-  transition-duration: 4s;
+  transition-property: background-color;
+  transition-duration: 0.7s;


Suggested change

transition-duration: 0.7s;

transition-duration: 1s;

Pros says it undergoes a one-second color transition.

updated; thanks

OnkarRuikar · 2023-11-16T15:43:02Z

files/en-us/web/html/element/dialog/index.md

@@ -49,7 +49,7 @@ This example demonstrates the create a non-modal dialog by using only HTML. Beca

 #### Result

-{{EmbedLiveSample("Caveats_of_creating_a_dialog_using_only_HTML", "100%", 200)}}
+{{EmbedLiveSample("HTML-only_dialog", "100%", 200)}}


This example doesn't work in playground.

OK; can you file an issue to look at this separately? This is really a playground issue rather than an issue with my content update.

OnkarRuikar · 2023-11-16T15:43:49Z

files/en-us/web/html/element/dialog/index.md

@@ -49,7 +49,7 @@ This example demonstrates the create a non-modal dialog by using only HTML. Beca

 #### Result



Suggested change

> **Note:** Reload page to reset the output.

OnkarRuikar · 2023-11-16T15:45:40Z

files/en-us/web/html/element/dialog/index.md

+We also set a starting style value for the {{cssxref("background-color")}} property on the [`::backdrop`](/en-US/docs/Web/CSS/::backdrop) that appears behind the `<dialog>` when it opens, to provide a nice darkening animation. The `dialog[open]::backdrop` selector selects only the backdrops of `<dialog>` elements when the dialog is open.
+
+```css
+/*   Open state of the dialog */


Suggested change

/* Open state of the dialog */

/* Open state of the dialog */

To match other two spaced comments.

estelle · 2023-11-16T20:42:20Z

files/en-us/web/css/css_transitions/using_css_transitions/index.md

@@ -185,6 +185,107 @@ This CSS establishes the look of the menu, with the background and text colors b

 {{EmbedLiveSample("Using transitions when highlighting menus")}}

+### Transitioning display and content-visibility
+
+This example demonstrates how [`display`](/en-US/docs/Web/CSS/display) and [`content-visibility`](/en-US/docs/Web/CSS/content-visibility) can be transitioned. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with [`opacity`](/en-US/docs/Web/CSS/opacity) rather than disappearing immediately.


Suggested change

This example demonstrates how [`display`](/en-US/docs/Web/CSS/display) and [`content-visibility`](/en-US/docs/Web/CSS/content-visibility) can be transitioned. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with [`opacity`](/en-US/docs/Web/CSS/opacity) rather than disappearing immediately.

This example demonstrates how [`display`](/en-US/docs/Web/CSS/display) and [`content-visibility`](/en-US/docs/Web/CSS/content-visibility) can be transitioned. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with [`opacity`](/en-US/docs/Web/CSS/opacity), or some other exit animation, rather than disappearing immediately.

optional

I don't think this is necessary; the text already says this is an example, rather than what always happens.

estelle · 2023-11-16T20:46:46Z

files/en-us/web/css/css_transitions/using_css_transitions/index.md

+
+When transitioning these properties, two additional features are also needed:
+
+- [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) is used to provide a set of starting values for properties set on an element that you want to transition from when the element receives its first style update. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on elements' first style updates, or when `display`/`content-visibility` changes from `none`/`hidden` to another state.


Every time you exit and then animate from display: none; the start style is used, because it is removed and put back into the dom. This covers that. With content-visibility, when it is animated the second time, does it start from start-styles each time? Or from the default state? If these two properties are different in this way, we should note that.

Heh, I'm really glad you brought this up. I tested content-visibility, and it turns out it doesn't need @starting-styles; content-visibility doesn't actually remove the content from the DOM. It transitions from the default state styles each time. You can see proof here:

https://content-visibility-transition-test.glitch.me/

(The source Glitch is at https://glitch.com/edit/#!/content-visibility-transition-test?path=index.html%3A36%3A8, in case you want to remix/play with it).

I'll make the necessary changes to all pages now, in a separate commit.

estelle

review of transition behavior: I couldn't create a nested code comment, so my comment is the suggested edit

estelle · 2023-11-16T20:55:41Z

files/en-us/web/css/transition-behavior/index.md

+### Basic usage
+
+```css
+.card {
+  transition-property: opacity, display;
+  transition-duration: 0.25s;
+  transition-behavior: allow-discrete;
+}
+
+.card.fade-out {
+  opacity: 0;
+  display: none;
+}
+```
+


Suggested change

### Basic usage

```css

.card {

transition-property: opacity, display;

transition-duration: 0.25s;

transition-behavior: allow-discrete;

}

.card.fade-out {

opacity: 0;

display: none;

}

```

Ah, I see. So you are suggesting not putting this as an example, and moving it to the description section. Yup, sounds reasonable. Done.

estelle · 2023-11-16T21:05:13Z

files/en-us/web/css/transition-behavior/index.md

+When attempting to transition properties with a [discrete animation type](/en-US/docs/Web/CSS/CSS_animated_properties#discrete), `transition-behavior` must be set to `allow-discrete` to enable those transitions to occur.
+
+This is most significant in the cases of [`display`](/en-US/docs/Web/CSS/display), [`content-visibility`](/en-US/docs/Web/CSS/display), and [`overlay`](/en-US/docs/Web/CSS/overlay), which historically were not animatable. The ability of these elements to be transitioned means that it is fairly easy to create entry and exit transitions, where an element is transitioned to and from a hidden state (which includes elements appearing in the [top layer](/en-US/docs/Glossary/Top_layer) such as [popovers](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} elements), or transitioned as soon as it is added to the DOM.
+


This is my suggestion, but Github doesn't like nesting code in suggestions:

The transition-behavior property is only relevant when used in conjunction with other transition properties, notably {{cssxref("transition-property")}} and {{cssxref("transition-duration")}}, as no transition occurs if no properties are animated over a non-zero duration of time.

.card { transition-property: opacity, display; transition-duration: 0.25s; transition-behavior: allow-discrete; } .card.fade-out { opacity: 0; display: none; }

The transition-behavior value can be included as part of a shorthand {{cssxref("transition")}} declaration. When included in the shorthand, when using or defaulting to all properties, theallow-discrete has no impact on regular animatable properties. The following CSS is equivalent to the longhand declarations above:

.card { transition: all 0.25s; transition: all 0.25s allow-discrete; } .card.fade-out { opacity: 0; display: none; }

We included the transition property twice. We included the transition without the allow-discrete value before the one with the value to ensure the card's other properties still transition if a browser doesn't support transition-behavior.

Sounds good; added, with a few tweaks.

estelle · 2023-11-16T22:59:42Z

files/en-us/web/css/display/index.md

+When animating `display` with [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions), two additional features are needed:
+
+- [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) provides starting values for properties you want to transition from when the animated element is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on an element's first style update or when the `display` type changes from `none` to another type.
+- [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) needs to be set on `display` when it is transitioned to enable `display` transitions.


Suggested change

- [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) needs to be set on `display` when it is transitioned to enable `display` transitions.

- [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) needs to be set on the {{cssxref("transition-property")}} declaration (or the {{cssxref("transition")}} shorthand) to enable `display` transitions.

estelle · 2023-11-16T23:08:53Z

files/en-us/web/css/overlay/index.md

+```
+
+#### CSS
+


Suggested change

The `overlay` property is only present in list of transitioned properties. As `overlay` is a user-agent controlled property, it is neither declared in the pre-transition or post-transition state.

We aren't including the overlay property as a property. We need to explain why. This is my attempt. You might have a better though.

estelle · 2023-11-16T23:13:30Z

files/en-us/web/css/overlay/index.md

+
+{{CSSRef}}{{SeeCompatTable}}
+
+The **`overlay`** [CSS](/en-US/docs/Web/CSS) property specifies whether an element appearing in the [top layer](/en-US/docs/Glossary/Top_layer) (for example, a shown [popover](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} element) is actually rendered in the top layer.


Suggested change

The **`overlay`** [CSS](/en-US/docs/Web/CSS) property specifies whether an element appearing in the [top layer](/en-US/docs/Glossary/Top_layer) (for example, a shown [popover](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} element) is actually rendered in the top layer.

The **`overlay`** [CSS](/en-US/docs/Web/CSS) property specifies whether an element appearing in the [top layer](/en-US/docs/Glossary/Top_layer) (for example, a shown [popover](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} element) is actually rendered in the top layer. This property is only relevant within a list of {{cssxref("transition-property")}} values, and only if `allow-discrete` is set as the {{cssxref("transition-behavior")}}.

estelle · 2023-11-16T23:14:01Z

files/en-us/web/css/overlay/index.md

+
+## See also
+
+- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)


Suggested change

- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)

- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions) module

estelle

content-visiblility page: Just an h3 title edit for an example (and the same edit in the rendering function call).

estelle · 2023-11-16T23:16:57Z

files/en-us/web/css/content-visibility/index.md

@@ -149,6 +169,106 @@ document.querySelectorAll("button.toggle").forEach((button) => {

 {{ EmbedLiveSample('Using hidden to manually manage visibility') }}

+### content-visibility animation example


Suggested change

### content-visibility animation example

### Animating content-visibility

it's in examples, so we don't need to add that to the header

Good call. I've changed this heading, and all the links/references to it.

estelle · 2023-11-16T23:18:45Z

files/en-us/web/css/content-visibility/index.md

+
+The rendered result looks like this:
+
+{{ EmbedLiveSample("content-visibility animation example", "100%", "300") }}


Suggested change

{{ EmbedLiveSample("content-visibility animation example", "100%", "300") }}

{{ EmbedLiveSample("Animating content-visibility", "100%", "300") }}

estelle · 2023-11-17T00:13:38Z

see #29943 (comment)

…eding @starting-style

…lls/content into overlay-discrete-animations

estelle

Squeeeeeeeeeeeee! 🎉

chrisdavidmills added 7 commits September 11, 2023 16:51

feat: Add content for overlay and discrete animation features

0c09617

Add rest of required updates

25f6a67

Merge branch 'main' into overlay-discrete-animations

8cc056f

Improving popover transition examples based on josepharhar feedback

8fdd02c

improve popover keyframe example with beforetoggle

31142db

Merge branch 'main' into overlay-discrete-animations

44363dd

Merge branch 'main' into overlay-discrete-animations

3e5bd55

chrisdavidmills requested review from a team as code owners October 31, 2023 17:07

chrisdavidmills requested review from wbamberg, estelle and bsmth and removed request for a team October 31, 2023 17:07

github-actions bot added Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs labels Oct 31, 2023

chrisdavidmills mentioned this pull request Oct 31, 2023

feat: Add content for overlay and discrete animation features #29049

Closed

OnkarRuikar reviewed Nov 1, 2023

View reviewed changes

Merge branch 'main' into overlay-discrete-animations

39f6bb2

This comment was marked as resolved.

Sign in to view

Making fixes for OnkarRuikar comments

cc7e120

chrisdavidmills requested a review from OnkarRuikar November 1, 2023 15:02

This comment was marked as resolved.

Sign in to view

estelle reviewed Nov 1, 2023

View reviewed changes

estelle reviewed Nov 15, 2023

View reviewed changes

chrisdavidmills added 2 commits November 16, 2023 08:40

More estelle fixes

4023e96

Merge branch 'main' into overlay-discrete-animations

086c494

chrisdavidmills requested a review from estelle November 16, 2023 08:44

OnkarRuikar reviewed Nov 16, 2023

View reviewed changes

estelle reviewed Nov 16, 2023

View reviewed changes

chrisdavidmills added 5 commits November 20, 2023 13:17

More estelle and Onkar comment fixes

beb0532

Merge branch 'main' into overlay-discrete-animations

74cea43

Update descriptions in light of content-visibility transitions not ne…

6bc44bf

…eding @starting-style

Merge branch 'overlay-discrete-animations' of github.com:chrisdavidmi…

44c146e

…lls/content into overlay-discrete-animations

Merge branch 'main' into overlay-discrete-animations

9609659

chrisdavidmills requested a review from estelle November 20, 2023 14:43

estelle approved these changes Nov 20, 2023

View reviewed changes

Merge branch 'main' into overlay-discrete-animations

197b3d9

chrisdavidmills removed request for bsmth and dipikabh November 20, 2023 15:34

dipikabh approved these changes Nov 20, 2023

View reviewed changes

estelle merged commit bed59f2 into mdn:main Nov 20, 2023
8 checks passed

	- : Add `display` to the transitions list so that the `<dialog>` will remain as `display: block` for the duration of the transition, ensuring the other transitions are visible.
	- : Add `display` to the transitions list so that the `<dialog>` will remain as `display: block` (or other visible `display` value set on the dialog's open state) for the duration of the transition, ensuring the other transitions are visible.


		##### CSS

		In the CSS, we include a `@starting-style` block that defines the transition starting styles for the `opacity` and `transform` properties, transition end styles on the `dialog[open]` state, and default styles on the default `dialog` state to transition back to once the `<dialog>` has appeared. Note how the the `<dialog>`'s `transition` list includes not only these properties, but also the `display` and `overlay` properties, each with `allow-discrete` set on them.

	Note the `@starting-style` block used to specify the starting style for the transition, and the inclusion of the `display` property in the trainsitions list, with `allow-discrete` set on it.
	Note the `@starting-style` block used to specify the starting style for the transition, and the inclusion of the `display` property in the transitions list, with `allow-discrete` set on it.


		The code renders as follows:

		{{ EmbedLiveSample("Animating a popover", "100%", "200") }}

	{{ EmbedLiveSample("Animating a popover", "100%", "200") }}
	{{ EmbedLiveSample("Transitioning a popover", "100%", "200") }}

		@@ -49,7 +49,7 @@ This example demonstrates the create a non-modal dialog by using only HTML. Beca

		#### Result

	/* Open state of the dialog */
	/* Open state of the dialog */


		When transitioning these properties, two additional features are also needed:

		- [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) is used to provide a set of starting values for properties set on an element that you want to transition from when the element receives its first style update. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on elements' first style updates, or when `display`/`content-visibility` changes from `none`/`hidden` to another state.

		When attempting to transition properties with a [discrete animation type](/en-US/docs/Web/CSS/CSS_animated_properties#discrete), `transition-behavior` must be set to `allow-discrete` to enable those transitions to occur.

		This is most significant in the cases of [`display`](/en-US/docs/Web/CSS/display), [`content-visibility`](/en-US/docs/Web/CSS/display), and [`overlay`](/en-US/docs/Web/CSS/overlay), which historically were not animatable. The ability of these elements to be transitioned means that it is fairly easy to create entry and exit transitions, where an element is transitioned to and from a hidden state (which includes elements appearing in the [top layer](/en-US/docs/Glossary/Top_layer) such as [popovers](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} elements), or transitioned as soon as it is added to the DOM.

	- [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) needs to be set on `display` when it is transitioned to enable `display` transitions.
	- [`transition-behavior: allow-discrete`](/en-US/docs/Web/CSS/transition-behavior) needs to be set on the {{cssxref("transition-property")}} declaration (or the {{cssxref("transition")}} shorthand) to enable `display` transitions.



	The `overlay` property is only present in list of transitioned properties. As `overlay` is a user-agent controlled property, it is neither declared in the pre-transition or post-transition state.


		{{CSSRef}}{{SeeCompatTable}}

		The `overlay` [CSS](/en-US/docs/Web/CSS) property specifies whether an element appearing in the [top layer](/en-US/docs/Glossary/Top_layer) (for example, a shown [popover](/en-US/docs/Web/API/Popover_API) or modal {{htmlelement("dialog")}} element) is actually rendered in the top layer.


		## See also

		- [CSS transitions](/en-US/docs/Web/CSS/CSS_transitions)

		@@ -149,6 +169,106 @@ document.querySelectorAll("button.toggle").forEach((button) => {

		{{ EmbedLiveSample('Using hidden to manually manage visibility') }}

		### content-visibility animation example

	### content-visibility animation example
	### Animating content-visibility


		The rendered result looks like this:

		{{ EmbedLiveSample("content-visibility animation example", "100%", "300") }}

	{{ EmbedLiveSample("content-visibility animation example", "100%", "300") }}
	{{ EmbedLiveSample("Animating content-visibility", "100%", "300") }}

feat: Editorial review: Add content for overlay and discrete animation features #29943

feat: Editorial review: Add content for overlay and discrete animation features #29943

Conversation

chrisdavidmills commented Oct 31, 2023 • edited Loading

Description

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Oct 31, 2023 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OnkarRuikar Nov 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle Nov 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle commented Nov 17, 2023

estelle left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Oct 31, 2023 •

edited

Loading

github-actions bot commented Oct 31, 2023 •

edited

Loading

OnkarRuikar Nov 16, 2023 •

edited

Loading

estelle Nov 16, 2023 •

edited

Loading