4

我正在尝试按照此处所述为 CSS 渐变设置动画，但无法使其正常工作。作为一个例子，我把这个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 渐变设置动画还是我做错了什么？

任何帮助是极大的赞赏。

4

1 回答 1

5

似乎您无法为 css 背景渐变设置动画，但您仍然可以为不透明度设置动画以尝试使其正常工作。

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

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

于 2013-09-01T21:21:24.483 回答