css - 使用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;
}