根据父级对背景滤镜的不透明度进行动画处理？

Question

我正在使用通过背景滤镜应用模糊的div。当自己的不透明度被设置为动画时，模糊的不透明度可以设置为动画，但是当其父级的不透明度被设置为动画时，则不能。

我正在尝试制作背景滤镜模糊的不透明度动画，以使其与父级模糊一起。用例是一个模态弹出窗口，其中背景和内容都以动画不透明度进出。我知道我可以为背景和内容分别设置不透明度的动画，但是似乎应该有一种方法可以仅对父对象进行动画处理，并使它们都根据一个值进行动画处理。

.blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.2);
}

这是我的意思的示例：https://codepen.io/GoingKayaking/pen/eYpPJxY

请注意模糊效果不会消失。它只是消失了。

更新 我尝试了以下方法，它似乎可以工作，但同时需要模糊和我希望不透明度动画具有单独动画时间的任何其他元素。理想情况下，它们都在容器控制的相同动画持续时间下运行。有可能吗？

.blur {
  ...
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

.container.hide .blur {
  opacity: 0;
}