Css 渐变动画

我正在尝试设置CSS渐变的动画，但我无法让它工作。作为一个例子，我把JSFIDLE放在一起

总而言之，渐变上的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”类。当使用相同的代码但使用坚实的背景时，它可以正常工作，如JSFIDLE链接所示

是否真的可以为CSS3渐变设置动画，或者我做错了什么

---

非常感谢您的帮助。

您似乎无法设置css背景渐变的动画，但您仍然可以设置不透明度的动画，以尝试实现此功能

如果有两个容器，一个在另一个容器的顶部，具有完全相同的宽度和高度，每个容器具有不同的渐变背景颜色，则可以将顶部的容器淡出到不透明度：0

---

如果您不想为第二个背景容器的代码添加额外的标记，可以使用CSS伪选择器：：before和：：after来执行此操作。

似乎还不支持渐变过渡，我不知道这个答案是如何被接受/投票的，你可能想用一种使用绝对定位元素的“假”转换方法来检查这一点。我是写第一个答案的人。我目前正在努力找出它不起作用的原因，对于给您带来的不便，我深表歉意。请看这里。请看这里：