css - CSS3：当背景颜色为渐变时，过渡不起作用

Question

我准备了两种风格的body，它们的背景都是渐变的，我也给标签添加了过渡效果：

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%);
}

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

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

这是演示

为什么会这样？如何使渐变背景颜色切换也具有过渡效果？

Answer 1

CSS 过渡规范说背景的颜色可以动画，但渐变被归类为图像。

如果您想获得渐变过渡效果，您将不得不伪造它，例如，将两个元素放在一起，并将顶部元素的不透明度设置为 0 到 1 或 1 到 0 的动画。