CSS3：过渡确实'；背景色为渐变色时不起作用

我准备了两种风格的

主体

，它们的背景都是渐变的，我还为标签添加了过渡效果：

body{
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    -webkit-transition: all 1s linear 0s;
}

body.orange{
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.7), rgba(35, 35, 35, 1) 60%);
}

我使用按钮在两种样式之间切换。问题是样式切换没有过渡效果

但当我将背景色设置为纯色时，如“红色”或“黑色”，过渡效果会再次显示

这是你的电话号码

---

为什么会发生这种情况？如何使渐变背景色切换也具有过渡效果？

CSS过渡规范说，但渐变被分类为

如果要获得渐变过渡效果，必须对其进行模拟，例如，将两个元素放置在彼此的顶部，并将顶部元素的不透明度设置为0到1或1到0