{"id":293,"date":"2025-01-29T09:00:00","date_gmt":"2025-01-29T10:00:00","guid":{"rendered":"https:\/\/blissfuldebt.com\/?p=293"},"modified":"2025-03-06T17:24:39","modified_gmt":"2025-03-06T17:24:39","slug":"transitioning-top-layer-entries-and-the-display-property-in-css","status":"publish","type":"post","link":"https:\/\/blissfuldebt.com\/index.php\/2025\/01\/29\/transitioning-top-layer-entries-and-the-display-property-in-css\/","title":{"rendered":"Transitioning Top-Layer Entries And The Display Property In CSS"},"content":{"rendered":"<p>              <title>Transitioning Top-Layer Entries And The Display Property In CSS<\/title><\/p>\n<article>\n<header>\n<h1>Transitioning Top-Layer Entries And The Display Property In CSS<\/h1>\n<address>Brecht De Ruyte<\/address>\n<p>                  2025-01-29T10:00:00+00:00<br \/>\n                  2025-03-06T17:04:34+00:00<br \/>\n                <\/header>\n<p>Animating from and to <code>display: none;<\/code> was something we could only achieve with JavaScript to change classes or create other hacks. The reason why we couldn\u2019t do this in CSS is explained in the new <a href=\"https:\/\/www.w3.org\/TR\/css-transitions-2\/#defining-before-change-style\">CSS Transitions Level 2 specification<\/a>:<\/p>\n<blockquote><p>\u201cIn Level 1 of this specification, transitions can only start during a style change event for elements that have a defined before-change style established by the previous style change event. That means a transition could not be started on an element that was not being rendered for the previous style change event.\u201d<\/p><\/blockquote>\n<p>In simple terms, this means that we couldn\u2019t start a transition on an element that is hidden or that has just been created.<\/p>\n<h3 id=\"what-does-transition-behavior-allow-discrete-do\">What Does <code>transition-behavior: allow-discrete<\/code> Do?<\/h3>\n<p><code>allow-discrete<\/code> is a bit of a strange name for a CSS property value, right? We are going on about transitioning <code>display: none<\/code>, so why isn\u2019t this named <code>transition-behavior: allow-display<\/code> instead? The reason is that this does a bit more than handling the CSS <code>display<\/code> property, as there are other \u201cdiscrete\u201d properties in CSS. A simple rule of thumb is that discrete properties do not transition but usually flip right away between two states. Other examples of discrete properties are <code>visibility<\/code> and <code>mix-blend-mode<\/code>. I\u2019ll include an example of these at the end of this article.<\/p>\n<p>To summarise, setting the <code>transition-behavior<\/code> property to <code>allow-discrete<\/code> allows us to tell the browser it can swap the values of a discrete property (e.g., <code>display<\/code>, <code>visibility<\/code>, and <code>mix-blend-mode<\/code>) at the 50% mark instead of the 0% mark of a transition.<\/p>\n<h3 id=\"what-does-starting-style-do\">What Does <code>@starting-style<\/code> Do?<\/h3>\n<p>The <code>@starting-style<\/code> rule defines the styles of an element right before it is rendered to the page. This is highly needed in combination with <code>transition-behavior<\/code> and this is why:<\/p>\n<p>When an item is added to the DOM or is initially set to <code>display: none<\/code>, it needs some sort of \u201cstarting style\u201d from which it needs to transition. To take the example further, <a href=\"https:\/\/css-tricks.com\/clarifying-the-relationship-between-popovers-and-dialogs\/\">popovers and dialog elements<\/a> are added to a top layer which is a layer that is outside of your document flow, you can kind of look at it as a sibling of the <code>&lt;html&gt;<\/code> element in your page\u2019s structure. Now, when opening this dialog or popover, they get created inside that top layer, so they don\u2019t have any styles to start transitioning from, which is why we set <code>@starting-style<\/code>. Don\u2019t worry if all of this sounds a bit confusing. The demos might make it more clearly. The important thing to know is that we can give the browser something to start the animation with since it otherwise has nothing to animate from.<\/p>\n<h3 id=\"a-note-on-browser-support\">A Note On Browser Support<\/h3>\n<p>At the moment of writing, the <code>transition-behavior<\/code> is available in Chrome, Edge, Safari, and Firefox. It\u2019s the same for <code>@starting-style<\/code>, but Firefox currently does not support animating from <code>display: none<\/code>. But remember that everything in this article can be perfectly used as a progressive enhancement.<\/p>\n<p>Now that we have the theory of all this behind us, let\u2019s get practical. I\u2019ll be covering three use cases in this article:<\/p>\n<ul>\n<li>Animating from and to <code>display: none<\/code> in the DOM.<\/li>\n<li>Animating dialogs and popovers entering and exiting the top layer.<\/li>\n<li>More \u201cdiscrete properties\u201d we can handle.\n<p><\/li>\n<\/ul>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"animating-from-and-to-display-none-in-the-dom\">Animating From And To <code>display: none<\/code> In The DOM<\/h2>\n<p>For the first example, let\u2019s take a look at <code>@starting-style<\/code> alone. I created this demo purely to explain the magic. Imagine you want two buttons on a page to add or remove list items inside of an unordered list.<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>This could be your starting HTML:<\/p>\n<pre><code class=\"language-html\">&lt;button type=\"button\" class=\"btn-add\"&gt;\n  Add item\n&lt;\/button&gt;\n&lt;button type=\"button\" class=\"btn-remove\"&gt;\n  Remove item\n&lt;\/button&gt;\n&lt;ul role=\"list\"&gt;&lt;\/ul&gt;\n<\/code><\/pre>\n<p>Next, we add actions that add or remove those list items. This can be any method of your choosing, but for demo purposes, I quickly wrote a bit of JavaScript for it:<\/p>\n<pre><code class=\"language-javascript\">document.addEventListener(\"DOMContentLoaded\", () =&gt; {\n  const addButton = document.querySelector(\".btn-add\");\n  const removeButton = document.querySelector(\".btn-remove\");\n  const list = document.querySelector('ul[role=\"list\"]');\n\n  addButton.addEventListener(\"click\", () =&gt; {\n    const newItem = document.createElement(\"li\");\n    list.appendChild(newItem);\n  });\n\n  removeButton.addEventListener(\"click\", () =&gt; {\n    if (list.lastElementChild) {\n      list.lastElementChild.classList.add(\"removing\");\n      setTimeout(() =&gt; {\n        list.removeChild(list.lastElementChild);\n      }, 200);\n    }\n  });\n});\n<\/code><\/pre>\n<p>When clicking the <code>addButton<\/code>, an empty list item gets created inside of the unordered list. When clicking the <code>removeButton<\/code>, the last item gets a new <code>.removing<\/code> class and finally gets taken out of the DOM after 200ms.<\/p>\n<p>With this in place, we can write some CSS for our items to animate the removing part:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      transition: opacity 0.2s, transform 0.2s;\n\n      &amp;.removing {\n        opacity: 0;\n        transform: translate(0, 50%);\n      }\n    }\n  }\n<\/code><\/pre>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>This is great! Our <code>.removing<\/code> animation is already looking perfect, but what we were looking for here was a way to animate the entry of items coming inside of our DOM. For this, we will need to define those starting styles, as well as the final state of our list items.<\/p>\n<p>First, let\u2019s update the CSS to have the final state inside of that list item:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      opacity: 1;\n      transform: translate(0, 0);\n      transition: opacity 0.2s, transform 0.2s;\n\n      &amp;.removing {\n        opacity: 0;\n        transform: translate(0, 50%);\n      }\n    }\n  }\n<\/code><\/pre>\n<p>Not much has changed, but now it\u2019s up to us to let the browser know what the starting styles should be. We could set this the same way we did the <code>.removing<\/code> styles like so:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      opacity: 1;\n      transform: translate(0, 0);\n      transition: opacity 0.2s, transform 0.2s;\n\n      @starting-style {\n        opacity: 0;\n        transform: translate(0, 50%);\n      }\n\n      &amp;.removing {\n        opacity: 0;\n        transform: translate(0, 50%);\n      }\n    }\n  }\n<\/code><\/pre>\n<p>Now we\u2019ve let the browser know that the <code>@starting-style<\/code> should include zero opacity and be slightly nudged to the bottom using a <code>transform<\/code>. The final result is something like this:<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>But we don\u2019t need to stop there! We could use different animations for entering and exiting. We could, for example, update our starting style to the following:<\/p>\n<pre><code class=\"language-css\">@starting-style {\n  opacity: 0;\n  transform: translate(0, -50%);\n}\n<\/code><\/pre>\n<p>Doing this, the items will enter from the top and exit to the bottom. See the full example in this CodePen:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"XJroPgg\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [@starting-style demo &#8211; up-in, down-out [forked]](https:\/\/codepen.io\/smashingmag\/pen\/XJroPgg) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/XJroPgg\">@starting-style demo &#8211; up-in, down-out [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h3 id=\"when-to-use-transition-behavior-allow-discrete\">When To Use <code>transition-behavior: allow-discrete<\/code><\/h3>\n<p>In the previous example, we added and removed items from our DOM. In the next demo, we will show and hide items using the CSS <code>display<\/code> property. The basic setup is pretty much the same, except we will add eight list items to our DOM with the <code>.hidden<\/code> class attached to it:<\/p>\n<pre><code class=\"language-html\">  &lt;button type=\"button\" class=\"btn-add\"&gt;\n    Show item\n  &lt;\/button&gt;\n  &lt;button type=\"button\" class=\"btn-remove\"&gt;\n    Hide item\n  &lt;\/button&gt;\n\n&lt;ul role=\"list\"&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n  &lt;li class=\"hidden\"&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<p>Once again, for demo purposes, I added a bit of JavaScript that, this time, removes the <code>.hidden<\/code> class of the next item when clicking the <code>addButton<\/code> and adds the <code>hidden<\/code> class back when clicking the <code>removeButton<\/code>:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">document.addEventListener(\"DOMContentLoaded\", () =&gt; {\n  const addButton = document.querySelector(\".btn-add\");\n  const removeButton = document.querySelector(\".btn-remove\");\n  const listItems = document.querySelectorAll('ul[role=\"list\"] li');\n\n  let activeCount = 0;\n\n  addButton.addEventListener(\"click\", () =&gt; {\n    if (activeCount &lt; listItems.length) {\n      listItems[activeCount].classList.remove(\"hidden\");\n      activeCount++;\n    }\n  });\n\n  removeButton.addEventListener(\"click\", () =&gt; {\n    if (activeCount &gt; 0) {\n      activeCount--;\n      listItems[activeCount].classList.add(\"hidden\");\n    }\n  });\n});\n<\/code><\/pre>\n<\/div>\n<p>Let\u2019s put together everything we learned so far, add a <code>@starting-style<\/code> to our items, and do the basic setup in CSS:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      display: block;\n      opacity: 1;\n      transform: translate(0, 0);\n      transition: opacity 0.2s, transform 0.2s;\n\n      @starting-style {\n        opacity: 0;\n        transform: translate(0, -50%);\n      }\n\n      &amp;.hidden {\n        display: none;\n        opacity: 0;\n        transform: translate(0, 50%);\n      }\n    }\n  }\n<\/code><\/pre>\n<p>This time, we have added the <code>.hidden<\/code> class, set it to <code>display: none<\/code>, and added the same <code>opacity<\/code> and <code>transform<\/code> declarations as we previously did with the <code>.removing<\/code> class in the last example. As you might expect, we get a nice fade-in for our items, but removing them is still very abrupt as we set our items directly to <code>display: none<\/code>.<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>This is where the <code>transition-behavior<\/code> property comes into play. To break it down a bit more, let\u2019s remove the <code>transition<\/code> property shorthand of our previous CSS and open it up a bit:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      display: block;\n      opacity: 1;\n      transform: translate(0, 0);\n      transition-property: opacity, transform;\n      transition-duration: 0.2s;\n    }\n  }\n<\/code><\/pre>\n<p>All that is left to do is transition the <code>display<\/code> property and set the <code>transition-behavior<\/code> property to <code>allow-discrete<\/code>:<\/p>\n<pre><code class=\"language-css\">ul {\n    li {\n      display: block;\n      opacity: 1;\n      transform: translate(0, 0);\n      transition-property: opacity, transform, display;\n      transition-duration: 0.2s;\n      transition-behavior: allow-discrete;\n      \/&#042; etc. &#042;\/\n    }\n  }\n<\/code><\/pre>\n<p>We are now animating the element from <code>display: none<\/code>, and the result is exactly as we wanted it:<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>We can use the <code>transition<\/code> shorthand property to make our code a little less verbose:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">transition: opacity 0.2s, transform 0.2s, display 0.2s allow-discrete;\n<\/code><\/pre>\n<\/div>\n<p>You can add <code>allow-discrete<\/code> in there. But if you do, take note that if you declare a shorthand transition after <code>transition-behavior<\/code>, it will be overruled. So, instead of this:<\/p>\n<pre><code class=\"language-css\">transition-behavior: allow-discrete;\ntransition: opacity 0.2s, transform 0.2s, display 0.2s;\n<\/code><\/pre>\n<p>\u2026we want to declare <code>transition-behavior<\/code> <em>after<\/em> the <code>transition<\/code> shorthand:<\/p>\n<pre><code class=\"language-css\">transition: opacity 0.2s, transform 0.2s, display 0.2s;\ntransition-behavior: allow-discrete;\n<\/code><\/pre>\n<p>Otherwise, the <code>transition<\/code> shorthand property overrides <code>transition-behavior<\/code>.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"GgKPXda\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [@starting-style and transition-behavior: allow-discrete [forked]](https:\/\/codepen.io\/smashingmag\/pen\/GgKPXda) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/GgKPXda\">@starting-style and transition-behavior: allow-discrete [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"animating-dialogs-and-popovers-entering-and-exiting-the-top-layer\">Animating Dialogs And Popovers Entering And Exiting The Top Layer<\/h2>\n<p>Let\u2019s add a few use cases with dialogs and popovers. Dialogs and popovers are good examples because they get added to the top layer when opening them.<\/p>\n<h3 id=\"what-is-that-top-layer\">What Is That Top Layer?<\/h3>\n<p>We\u2019ve already likened the \u201ctop layer\u201d to a sibling of the <code>&lt;html&gt;<\/code> element, but you might also think of it as a special layer that sits above everything else on a web page. It&rsquo;s like a transparent sheet that you can place over a drawing. Anything you draw on that sheet will be visible on top of the original drawing.<\/p>\n<p>The original drawing, in this example, is the DOM. This means that the top layer is out of the document flow, which provides us with a few benefits. For example, as I stated before, dialogs and popovers are added to this top layer, and that makes perfect sense because they should always be on top of everything else. No more <code>z-index: 9999<\/code>!<\/p>\n<p>But it\u2019s more than that:<\/p>\n<ul>\n<li><strong><code>z-index<\/code> is irrelevant<\/strong>: Elements on the top layer are always on top, regardless of their <code>z-index<\/code> value.<\/li>\n<li><strong>DOM hierarchy doesn\u2019t matter<\/strong>: An element\u2019s position in the DOM doesn\u2019t affect its stacking order on the top layer.<\/li>\n<li><strong>Backdrops<\/strong>: We get access to a new <code>::backdrop<\/code> pseudo-element that lets us style the area between the top layer and the DOM beneath it.<\/li>\n<\/ul>\n<p>Hopefully, you are starting to understand the importance of the top layer and how we can transition elements in and out of it as we would with popovers and dialogues.<\/p>\n<h3 id=\"transitioning-the-dialog-element-in-the-top-layer\">Transitioning The Dialog Element In The Top Layer<\/h3>\n<p>The following HTML contains a button that opens a <code>&lt;dialog&gt;<\/code> element, and that <code>&lt;dialog&gt;<\/code> element contains another button that closes the <code>&lt;dialog&gt;<\/code>. So, we have one button that opens the <code>&lt;dialog&gt;<\/code> and one that closes it.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\">&lt;button class=\"open-dialog\" data-target=\"my-modal\"&gt;Show dialog&lt;\/button&gt;\n\n&lt;dialog id=\"my-modal\"&gt;\n  &lt;p&gt;Hi, there!&lt;\/p&gt;\n  &lt;button class=\"outline close-dialog\" data-target=\"my-modal\"&gt;\n    close\n  &lt;\/button&gt;\n&lt;\/dialog&gt;\n<\/code><\/pre>\n<\/div>\n<p>A lot is happening in HTML with <a href=\"https:\/\/utilitybend.com\/blog\/an-update-on-invokers-invoker-commands-in-html\">invoker commands<\/a> that will make the following step a bit easier, but for now, let\u2019s add a bit of JavaScript to make this modal actually work:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Get all open dialog buttons.\nconst openButtons = document.querySelectorAll(\".open-dialog\");\n\/\/ Get all close dialog buttons.\nconst closeButtons = document.querySelectorAll(\".close-dialog\");\n\n\/\/ Add click event listeners to open buttons.\nopenButtons.forEach((button) =&lt; {\n  button.addEventListener(\"click\", () =&lt; {\n    const targetId = button.getAttribute(\"data-target\");\n    const dialog = document.getElementById(targetId);\n    if (dialog) {\n      dialog.showModal();\n    }\n  });\n});\n\n\/\/ Add click event listeners to close buttons.\ncloseButtons.forEach((button) =&lt; {\n  button.addEventListener(\"click\", () =&lt; {\n    const targetId = button.getAttribute(\"data-target\");\n    const dialog = document.getElementById(targetId);\n    if (dialog) {\n      dialog.close();\n    }\n  });\n});\n<\/code><\/pre>\n<p>I\u2019m using the following styles as a starting point. Notice how I\u2019m styling the <code>::backdrop<\/code> as an added bonus!<\/p>\n<pre><code class=\"language-css\">dialog {\n  padding: 30px;\n  width: 100%;\n  max-width: 600px;\n  background: #fff;\n  border-radius: 8px;\n  border: 0;\n  box-shadow: \n    rgba(0, 0, 0, 0.3) 0px 19px 38px,\n    rgba(0, 0, 0, 0.22) 0px 15px 12px;\n    \n  &amp;::backdrop {\n    background-image: linear-gradient(\n      45deg in oklab,\n      oklch(80% 0.4 222) 0%,\n      oklch(35% 0.5 313) 100%\n    );\n  }\n}\n<\/code><\/pre>\n<p>This results in a pretty hard transition for the entry, meaning it\u2019s not very smooth:<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>Let\u2019s add transitions to this dialog element and the backdrop. I\u2019m going a bit faster this time because by now, you likely see the pattern and know what\u2019s happening:<\/p>\n<pre><code class=\"language-css\">dialog {\n  opacity: 0;\n  translate: 0 30%;\n  transition-property: opacity, translate, display;\n  transition-duration: 0.8s;\n\n  transition-behavior: allow-discrete;\n  \n  &amp;[open] {\n    opacity: 1;\n    translate: 0 0;\n\n    @starting-style {\n      opacity: 0;\n      translate: 0 -30%;\n    }\n  }\n}\n<\/code><\/pre>\n<p>When a dialog is open, the browser slaps an <code>open<\/code> attribute on it:<\/p>\n<pre><code class=\"language-html\">&lt;dialog open&gt; ... &lt;\/dialog&gt;\n<\/code><\/pre>\n<p>And that\u2019s something else we can target with CSS, like <code>dialog[open]<\/code>. So, in this case, we need to set a <code>@starting-style<\/code> for when the dialog is in an <code>open<\/code> state.<\/p>\n<p>Let\u2019s add a transition for our backdrop while we\u2019re at it:<\/p>\n<pre><code class=\"language-css\">dialog {\n  \/&#042; etc. &#042;\/\n  &amp;::backdrop {\n    opacity: 0;\n    transition-property: opacity;\n    transition-duration: 1s;\n  }\n\n  &amp;[open] {\n    \/&#042; etc. &#042;\/\n    &amp;::backdrop {\n      opacity: 0.8;\n\n      @starting-style {\n        opacity: 0;\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>Now you\u2019re probably thinking: <em>A-ha! But you should have added the <code>display<\/code> property and the <code>transition-behavior: allow-discrete<\/code> on the backdrop!<\/em><\/p>\n<p>But no, that is not the case. Even if I would change my backdrop pseudo-element to the following CSS, the result would stay the same:<\/p>\n<pre><code class=\"language-css\"> &amp;::backdrop {\n    opacity: 0;\n    transition-property: opacity, display;\n    transition-duration: 1s;\n    transition-behavior: allow-discrete;\n  }\n<\/code><\/pre>\n<p>It turns out that we are working with a <code>::backdrop<\/code> and when working with a <code>::backdrop<\/code>, we\u2019re implicitly also working with the CSS <code>overlay<\/code> property, which specifies whether an element appearing in the top layer is currently rendered in the top layer.<\/p>\n<p>And <code>overlay<\/code> just so happens to be another discrete property that we need to include in the <code>transition-property<\/code> declaration:<\/p>\n<pre><code class=\"language-css\">dialog {\n  \/&#042; etc. &#042;\/\n\n&amp;::backdrop {\n  transition-property: opacity, display, overlay;\n  \/&#042; etc. &#042;\/\n}\n<\/code><\/pre>\n<p>Unfortunately, this is currently only supported in Chromium browsers, but it can be perfectly used as a progressive enhancement.<\/p>\n<p>And, yes, we need to add it to the <code>dialog<\/code> styles as well:<\/p>\n<pre><code class=\"language-css\">dialog {\n  transition-property: opacity, translate, display, overlay;\n  \/&#042; etc. &#042;\/\n\n&amp;::backdrop {\n  transition-property: opacity, display, overlay;\n  \/&#042; etc. &#042;\/\n}\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"pvzqOGe\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Dialog: starting-style, transition-behavior, overlay [forked]](https:\/\/codepen.io\/smashingmag\/pen\/pvzqOGe) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/pvzqOGe\">Dialog: starting-style, transition-behavior, overlay [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<p>It\u2019s pretty much the same thing for a popover instead of a dialog. I\u2019m using the same technique, only working with popovers this time:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"emObLxe\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Popover transition with @starting-style [forked]](https:\/\/codepen.io\/smashingmag\/pen\/emObLxe) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/emObLxe\">Popover transition with @starting-style [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"other-discrete-properties\">Other Discrete Properties<\/h2>\n<p>There are a few other discrete properties besides the ones we covered here. If you remember the second demo, where we transitioned some items from and to <code>display: none<\/code>, the same can be achieved with the <code>visibility<\/code> property instead. This can be handy for those cases where you want items to preserve space for the element\u2019s box, even though it is invisible.<\/p>\n<p>So, here\u2019s the same example, only using <code>visibility<\/code> instead of <code>display<\/code>.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"LEPMJqX\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Transitioning the visibility property [forked]](https:\/\/codepen.io\/smashingmag\/pen\/LEPMJqX) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/LEPMJqX\">Transitioning the visibility property [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<p>The CSS <strong><code>mix-blend-mode<\/code><\/strong> property is another one that is considered discrete. To be completely honest, I can\u2019t find a good use case for a demo. But I went ahead and created a somewhat trite example where two <code>mix-blend-mode<\/code>s switch right in the middle of the transition instead of right away.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"bNbOxZp\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Transitioning mix-blend-mode [forked]](https:\/\/codepen.io\/smashingmag\/pen\/bNbOxZp) by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/bNbOxZp\">Transitioning mix-blend-mode [forked]<\/a> by <a href=\"https:\/\/codepen.io\/utilitybend\">utilitybend<\/a>.<\/figcaption><\/figure>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>That\u2019s an overview of how we can transition elements in and out of the top layer! In an ideal world, we could get away without needing a completely new property like <code>transition-behavior<\/code> just to transition otherwise \u201cun-transitionable\u201d properties, but here we are, and I\u2019m glad we have it.<\/p>\n<p>But we also got to learn about <code>@starting-style<\/code> and how it provides browsers with a set of styles that we can apply to the start of a transition for an element that\u2019s in the top layer. Otherwise, the element has nothing to transition from at first render, and we\u2019d have no way to transition them smoothly in and out of the top layer.<\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Transitioning Top-Layer Entries And The Display Property In CSS Transitioning [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":1,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":294,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/293\/revisions\/294"}],"wp:attachment":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}