我正在尝试按照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渐变动画或我做错了什么?
非常感谢任何帮助。
答案 0 :(得分:5)
似乎你无法为css背景渐变设置动画效果,但你仍然可以设置不透明度的动画来尝试使其工作。
如果您有两个容器,一个在另一个容器的顶部,具有完全相同的宽度和高度,每个容器具有不同的渐变背景颜色,您可以将顶部的容器淡出到不透明度:0。
如果您不想为第二个背景容器的代码添加额外的标记,可以使用CSS伪选择器:: before和:: after来执行此操作。