css转换-用css连续地为渐变的一种颜色设置动画

Question

在这里看到了一些类似的问题，但似乎无法特别解决这个问题。

我有一个渐变，上面是黑色，下面是蓝色。我希望蓝色在一个连续的循环中褪色为几种不同的颜色，但黑色保持不变。像这样：https://i.stack.imgur.com/6k9EN.gif

看到了一些像这样的演示，梯度不断地动画化，但它只是一个大的梯度，用关键帧垂直移动，这对我来说不起作用。想知道是否有人能推荐一个解决方案。

以下是迄今为止未激活的代码：http://jsfiddle.net/ssccdd/9qA3L/

body{
      background: -moz-linear-gradient(top, #000000 80%, #3300FF 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
      background: -webkit-linear-gradient(top,  #1e5799 80%,#3300FF 100%);
      background: -o-linear-gradient(top,  #000000 80%,#3300FF 100%);
      background: -ms-linear-gradient(top,  #000000 80%,#3300FF 100%);
      background: linear-gradient(to bottom,  #000000 80%,#3300FF 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3300FF',GradientType=0 );
      background-attachment: fixed;

}

Answer 1

您可能无法设置渐变色的动画，但可以设置背景色的动画。

所以，在你的情况下，有一个从黑色到透明的不变的线性梯度。然后使用CSS转换更改背景颜色。

下面是一个工作示例：http://jsfiddle.net/qSJa8/

我必须包含javascript才能从一种颜色切换到另一种颜色：

var classes = [ "stop1", "stop2", "stop3", "stop4" ];
var stopIndex = 0;
var lastClass = classes[0];
window.setInterval(function() {
    ++stopIndex;
    if(stopIndex >= classes.length) {
        stopIndex = 0;
    }
    var newClass = classes[stopIndex];
    $('#sampleDiv').removeClass(lastClass).addClass(newClass);
    lastClass = newClass;
}, 2000);

和css：

#sampleDiv {
    height:300px;   
    background-image: linear-gradient(180deg, black, black 50%, transparent);
    transition: background-color 2s;
}
.stop1 {
    background-color:blue; 
}
.stop2 {
    background-color:purple;
}
.stop3 {
    background-color:green;
}
.stop4 {
    background-color:yellow;
}