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

【问题标题】：CSS backdrop-filter does not work with transitionCSS 背景过滤器不适用于过渡
【发布时间】：2021-08-03 17:04:20
【问题描述】：

我有一个模态，为此我创建了一个背景。我希望背景模糊其背后的一切，但由于在显示模态时，有一些 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 后，背景过滤器属性的应用仍会在显示模式时立即发生。我错过了什么？

【问题讨论】：

改用filter: blur()。
@AmirrezaAmini 会模糊背景上的内容，而不是背后的内容，因此无法按预期工作。

标签： css

【解决方案1】：

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

你要找的是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>

【讨论】：