我正在尝试按照 here 中的说明为 CSS 渐变制作动画。但我无法让它工作。作为示例，我将 this 放在一起jsfiddle.
总的来说，渐变的 CSS 过渡似乎不起作用。
div#Machine {
-webkit-transition: background 5s;
-moz-transition: background 5s;
-ms-transition: background 5s;
-o-transition: background 5s;
transition: background 5s;
background: rgb(71, 234, 46);
background: -moz-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(71, 234, 46, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
background: -webkit-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -o-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -ms-linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: linear-gradient(top, rgba(71, 234, 46, 1) 0%, rgba(63, 63, 63, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ea2e', endColorstr='#3f3f3f', GradientType=0);
}
div#Machine.doublewin {
background: rgb(247, 247, 49);
background: -moz-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 247, 49, 1)), color-stop(100%, rgba(63, 63, 63, 1)));
background: -webkit-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -o-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: -ms-linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
background: linear-gradient(top, rgba(247, 247, 49, 1) 0%, rgba(63, 63, 63, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f731', endColorstr='#3f3f3f', GradientType=0);
}
我正在使用一些 javascript/jQuery 来添加/删除“doublewin”类。当使用相同的代码但使用纯色背景时，它工作正常，如 jsfiddle 链接所示。
是否真的可以为 CSS3 渐变设置动画，还是我做错了什么？
非常感谢任何帮助。
最佳答案
您似乎无法为 css 背景渐变设置动画，但您仍然可以为不透明度设置动画以尝试使其正常工作。
如果你有两个容器，一个在另一个上面，宽度和高度完全相同，每个容器都有不同的渐变背景颜色，你可以将顶部的容器淡出到不透明度:0。
如果您不想在代码中为第二个背景容器添加额外的标记，您可以使用 CSS 伪选择器::before 和::after 来执行此操作。
关于CSS 渐变动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18561555/