CSS 背景过滤器不适用于过渡

Question

我有一个模式，我为其创建了背景。我希望背景模糊其后面的所有内容，但由于在显示模式时，FPS 有所下降并且看起来有点滞后，因此我决定对其应用带有延迟的过渡。不幸的是，由于我无法检测到的原因，该转换似乎不适用于背景滤镜属性。

这是应用于背景的CSS ：

.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;
}

应用此 CSS 后，背景过滤器属性的应用仍然会在模式显示时立即发生。我缺少什么？

Answer 1

转换使您能够定义元素的两种状态之间的转换。您的背景从未更改过状态（自页面加载以来它就具有该属性backdrop-filter: blur(2px)），因此转换不会生效。

您正在寻找的是动画：

.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>