灰度化带有过渡的背景图像

Question

我有一个网站。我的身体有一个背景图像，我想在按下按钮后将其灰度。我将.grayscale类添加到包含.grayscale:before的正文中。

  .grayscale {
  transition: all 3s;
  position: relative;
}

.grayscale:before {
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
  display: block;
  background: inherit;
  transition: all 3s;

  filter: grayscale(70%) brightness(108%);
}

结果按计划进行，但没有过渡。背景为灰度，非常完美，但是因为我添加了类，所以过渡不计算在内。如何处理这些情况？

提前谢谢！