animating one color of a gradient continuously with css

Question

saw some similar questions here but can't seem to figure out this one in particular.

I have a gradient that's black on top and blue on the bottom. I want the blue to fade to several different colours on a continuous loop, but the black to remain in place. like this: https://i.stack.imgur.com/6k9EN.gif

saw some demos like this one where the gradient animates continuously but it's just a large gradient being shifted vertically with keyframes which wouldn't work for me. Wondering if anyone could recommend a solution.

Here's the unanimated code so far: 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;

}

See this similar question: http://stackoverflow.com/questions/10963059/jquery-animate-div-background-color-gradient — Andrew Shepherd, Apr 23 '14 at 05:22

score 2 · Accepted Answer · answered Apr 23 '14 at 05:54

You might not be able to animate gradient colors, but you can animate the background color.

So, in your case, have an unchanging linear gradient going from black to transparent. Then change the background color using CSS transitions.

Here's a working example: http://jsfiddle.net/qSJa8/

I had to include javascript to switch from one color to another:

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);

And the 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;
}

animating one color of a gradient continuously with css

1 Answers1