My fade in animation doesn't work for my modal backdrop

Issue

I have made modal using the element, and it's worked great, though I can't manage to make my backdrop actually fade in. I've tried other ways to animate as well, for example @keyframes, but that doesn't seem to work either, any help would be appreciated!

.modal {
  display: none;
  grid-template-columns: 1fr 1fr;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  width: 50%;
  border-style: solid;
  border-color: white;
  border-radius: 15px;
  cursor: default;
  user-select: none;
}

.modal::backdrop {
  backdrop-filter: blur(9px);
  background-image: linear-gradient( 150deg, rgba(255, 0, 255, 0.5), rgba(102, 51, 153, 0.5), rgba(30, 144, 255, 0.5), rgba(0, 0, 0, 0.5));
  transition: background-image 0.6s ease;
}

<dialog class="modal">
  <section>
    <h2 class="modalTitle">Placeholder</h2>
    <p class="modalDescription">Placeholder</p>
  </section>
  <section>
    <img class="modalImage" src="./img/placdeholder" alt="Placeholder" />
  </section>
</dialog>

Solution

As stated by Mister Jojo you have to use a bit of Javascript but it's not too onerous.

You can use the @property syntax to animate gradients and use those in the transition CSS property. There's some information on CSS Tricks here to get you started.

All we do is add a @property rule that defines our opacity starting value and then set the css variable in our linear-gradient property. We add a bit of javascript to add a class on click and then set the same css variable to our new value. See example code below:

const dialog = document.querySelector("dialog");
document.querySelector("#show_dialog").addEventListener("click", () => {
  dialog.showModal();
  dialog.classList.add("shown");
});

document.querySelector("#close_dialog").addEventListener("click", () => {
  dialog.close();
  dialog.classList.remove("shown");
});

@property --opacity {
  syntax: '<number>'; 
  inherits: false;
  initial-value: 0;
}

.modal {
  grid-template-columns: 1fr 1fr;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  width: 50%;
  border-style: solid;
  border-color: white;
  border-radius: 15px;
  cursor: default;
  user-select: none;
}

.modal::backdrop {
  backdrop-filter: blur(9px);
  background-image: linear-gradient(
      150deg, 
      rgba(255, 0, 255, var(--opacity)), 
      rgba(102, 51, 153, var(--opacity)), 
      rgba(30, 144, 255, var(--opacity)), 
      rgba(0, 0, 0, var(--opacity)));
  transition: --opacity 2s ease;
}

.modal.shown::backdrop {
  --opacity: 0.8;
}

<button id='show_dialog'>Show dialog</button>
<dialog class="modal">
  <section>
    <h2 class="modalTitle">Placeholder</h2>
    <p class="modalDescription">Placeholder</p>
    <button id='close_dialog'>Close</button>
  </section>
</dialog>

Note: this doesn't work on Firefox at the moment but is included in version 124 which is just coming out so will have almost complete browser coverage.

Answered By - Adam