CSS backdrop-filter does not work with transition

user_14523632 0
Viewed 1316

I have a modal for which I have created a backdrop. I want the backdrop to blur everything behind it, but since while showing the modal, there are some FPS drops and looks a bit laggy, I have decided to apply a transition with a delay to it. Unfortunately, the transition doesn't seem to apply to the backdrop-filter property for a reason I was not able to detect.

Here is the CSS applied to the backdrop:

.Backdrop {
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    backdrop-filter: blur(2px);
    transition: backdrop-filter 500ms 2s;
}

With this CSS applied, the application of the backdrop-filter property still happens instantly at the moment when the modal is shown. What am I missing?

css
1 Answers

Transitions enable you to define the transition between two states of an element. Your backdrop never changed state (it had the property backdrop-filter: blur(2px) since the page was loaded), so the transition doesn't take effect.

What you're looking for is an animation:

.backdrop {
  background-color: rgba(0, 0, 0, 0.25);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  
  animation: blur-in 500ms 2s forwards; /* Important */
}

/* Let's define an animation: */
@keyframes blur-in {
  from {
    backdrop-filter: blur(0px);
  }
  to {
    backdrop-filter: blur(2px);
  }
}
Some text for testing the blur.
<div class="backdrop"></div>

user_133311550
Related