CSS transition-behavior Property

Code Examples

A basic example showing how to transition an element from display none to block using allow-discrete and starting-style.

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #ff5500;
  display: none;
  opacity: 0;
  transition: display 0.5s allow-discrete, opacity 0.5s;
}
.box.show {
  display: block;
  opacity: 1;
}
@starting-style {
  .box.show {
    opacity: 0;
  }
}
</style>
<button onclick="document.querySelector('.box').classList.toggle('show')">Toggle Box</button>
<div class="box"></div>

An advanced semantic example using the dialog element and transition-behavior to animate the modal and its backdrop.

<style>
#modal {
  border: none;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.9);
  transition: 
    display 0.4s allow-discrete, 
    overlay 0.4s allow-discrete, 
    opacity 0.4s, 
    transform 0.4s;
}
#modal:open {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  #modal:open {
    opacity: 0;
    transform: scale(0.9);
  }
}
#modal::backdrop {
  background-color: rgba(0,0,0,0);
  transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete, background-color 0.4s;
}
#modal:open::backdrop {
  background-color: rgba(0,0,0,0.5);
}
</style>
<button id="openBtn">Open Modern Modal</button>
<dialog id="modal">
  <p>Modern Transition Logic</p>
  <button id="closeBtn">Close</button>
</dialog>
<script>
const modal = document.getElementById("modal");
document.getElementById("openBtn").onclick = () => modal.showModal();
document.getElementById("closeBtn").onclick = () => modal.close();
</script>

Pro Tip

You can include this value directly in the "transition" shorthand property. Instead of writing separate lines, you can use "transition: display 0.5s allow-discrete, opacity 0.5s;" to keep your CSS lean. This is the modern way to handle "display" animations without reaching for a heavy JavaScript library or complex keyframe hacks.