Change linear gradient background after a time

Question

I want to change a background after a time. If the background has got a "clear" color there is no problem but if the color is a gradient set as the code doesn't work. is there a work around for that?

background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));  /*For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));  /*For Firefox 3.6 to 15 */
background: linear-gradient(rgba(39,49,67,1),rgba(51,90,109,1),rgba(83,142,144,1), rgba(226,228,209,1));  /*Standard syntax */

jsfiddle for normal color change

Answer 1

What Dbugger said is true - you can't animate a background image with css animations.

However, you could fake it with a 4 stop gradient (cleverly position your color stops - I suggest using a gradient generator as Colorzilla or similar - will make your work easier ) - since a gradient is treated as a background-image, you can animate it's position by using background-position. In order to animate the position you need to increase it's size so part of the gradient is outside your container.

You can use animation-delay to set the initial delay before the animation starts.

html, body {width:100%;height:100%;margin:0;}
div {
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(118,191,36,1) 25%, rgba(224,117,35,1) 50%, rgba(242,38,42,1) 75%, rgba(130,100,70,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(25%,rgba(118,191,36,1)), color-stop(50%,rgba(224,117,35,1)), color-stop(75%,rgba(242,38,42,1)), color-stop(100%,rgba(130,100,70,1)));
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);   
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%);
    background-size: 100% 400%;
    background-position:0 0;
    -webkit-animation: animateGradient 5s ease 1;
    -moz-animation:    animateGradient 5s ease 1;
    animation:         animateGradient 5s ease 1;
    -webkit-animation-delay: 2s;
    -moz-animation-delay:    2s;
    animation-delay:         2s;
}


@-webkit-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@-moz-keyframes animateGradient {
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}
@keyframes animateGradient { 
    0%   {background-position: 0 0;}
    50%  {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

<div></div>

---

Alternative: Another approach you could take is to overlay one element over the other, set the initial gradient in top and ending gradient in the bottom element , and create an opacity animation, that fades out the top element after a certain amount of time (opacity: 0)

Below is an approach on how you can do it with a single element in markup (rely on the :after or :before pseudo element). The following approach has more compatibility cross devices:

html, body {width:100%;height:100%;margin:0;}
.gradient {
    position:relative;    
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1));
    background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
    background: linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1));
}
.gradient:after {
   content:"";
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -o-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: -moz-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    background: linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1));
    opacity: 0;
    -webkit-animation: animateGradient 3s linear 1;
    -moz-animation: animateGradient 3s linear 1;
    animation: animateGradient 3s linear 1;
}

@-webkit-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes animateGradient {
    0%   {opacity:1;}
    100% {opacity:0;}
}
@keyframes animateGradient {     
    0%   {opacity:1;}
    100% {opacity:0;}
}

<div class="gradient"></div>