4
我想要按照here所描述的方式为CSS渐变设置动画效果,但我无法使其工作。作为一个例子,我已经放在一起this jsfiddle。CSS渐变动画
作为一个概述,似乎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渐变,或者我做错了什么?
任何帮助,非常感谢。
似乎过渡与渐变尚不支持,我不知道如何答案被接受/ upvoted,你可能想检查此[其他答案](http://stackoverflow.com/a/9695075/2049063 )使用绝对定位元素进行“假”转换的方法 –
嗨,我是第一个答案的人。我目前正在努力寻找为什么它不起作用,并且对造成的不便表示非常抱歉。 – arik
看看这里http://jsbin.com/UsUtiQek/4/ – 2014-01-24 14:16:39