用css连续动画渐变的一种颜色

Question

在这里看到了一些类似的问题，但似乎找不出具体的问题。

我有一个坡度，上面是黑色，底部是蓝色。我希望蓝色在一个连续的循环中褪色到几种不同的颜色，而黑色则保持不变。像这样：http://i.stack.imgur.com/6k9EN.gif

看到了一些演示，如this one，其中渐变动画连续，但它只是一个大梯度被垂直移动的关键帧，这是不适合我。想知道是否有人能推荐一个解决方案。

下面是到目前为止一致的代码：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;
}