添加page-body类后，静态背景色无法过渡到渐变动画背景的解决咨询

现有CSS代码如下：

body {
  background: var(--main-color);
  transition: background 200ms ease;
  &.page-body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  }
}

预期效果：当body元素添加page-body类时，背景从var(--main-color)静态颜色平滑过渡到类中定义的渐变动画，但该效果未实现，求解决办法。

核心问题 #

CSS过渡仅支持同类型属性值之间的平滑变化，单一纯色背景和渐变背景属于不同类型，无法直接过渡；同时动画会直接覆盖过渡效果，导致看不到切换过程。

方案一：用伪元素承载渐变动画 #

通过body的伪元素单独实现渐变动画，默认隐藏伪元素，添加类后通过opacity过渡显示，实现静态背景到渐变动画的平滑切换：

body {
  background: var(--main-color);
  position: relative;
  z-index: 0;
}

body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: -1;
}

body.page-body::before {
  opacity: 1;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

方案二：统一背景类型 #

把静态纯色背景转为同色渐变，让两种状态的background属性类型一致，从而触发过渡效果：

body {
  /* 将纯色转为同色渐变，和目标渐变类型统一 */
  background: linear-gradient(var(--main-color), var(--main-color));
  transition: background 200ms ease;
}

body.page-body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture