jQuery animate div background color gradient?

Question

I'm trying to build a background animation with jQuery which changes from one gradient to another. I know you can use the .animate() function to change solid background colors, but can this also be done for gradients?

Here's a good example from some old Digg-style comments. I'm looking to do something like this animating from green to yellow

Solution 1

UPDATE: These days, all major browsers support CSS animations, which are way more reliable than jQuery. For reference, see Rohit's answer.

OLD ANSWER:

Animating the backgrounds directly is nearly impossible with jQuery, at least I could think of no way. There is a way though with this:

-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;

That ensures that there is a transition. You could for instance do that in CSS:

.background_animation_element{

    -webkit-transition: background 5s ;
    -moz-transition: background 5s ;
    -ms-transition: background 5s ;
    -o-transition: background 5s ;
    transition: background 5s ;

    background: rgb(71,234,46);
    background: -moz-linear-gradient(top,  rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ea2e', endColorstr='#3f3f3f',GradientType=0 );

}

.background_animation_element.yellow{

    background: rgb(247,247,49);
    background: -moz-linear-gradient(top,  rgba(247,247,49,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0 );

}

And, using jQuery, either add or remove the yellow class:

$('.background_animation_element').addClass('yellow');

That would ensure a gradual transition due to the transition duration property in the CSS file.

Solution 2

Animating the background with jQuery is definitely feasible, as seen in this CodePen (not my creation, but very slick): http://codepen.io/quasimondo/pen/lDdrF

The CodePen example uses some slick bitshifting and other tricks to determine the colors, but he just defines a function (updateGradient) that modifies the background's CSS and then wraps it in a setInterval.

The big takeaway from the updateGradient is the following:

 $('#gradient').css({
     background: "-webkit-gradient(linear, left top, right top, from("+color1+"),
   to("+color2+"))"}).css({
     background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

Then just set the color variables dynamically and you're gravy.

Solution 3

Try this, work great -

div{
     display:block; 
     width:500px; 
     height:250px;
     background: linear-gradient(270deg, #509591, #7bc446, #c0de9e, #b9dca4);
     background-size: 800% 800%;

     -webkit-animation: AnimationName 30s ease infinite;
     -moz-animation: AnimationName 30s ease infinite;
     animation: AnimationName 30s ease infinite;
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

<div></div>

source - https://www.gradient-animator.com/

Solution 4

I needed it too, i searched it in google. But didn't find any solution, so i solve this. I do with this dirty way, but worked :) This is my code:

interval = 0;
gradient_percent = 0;
interval_value = 5;
var interval_gradient = setInterval(function(){
    if(interval == 10) clearInterval(interval_gradient);

    gradient_percent += interval_value;
    $('.slider-text').css('background', 'linear-gradient(to right, #373535 '+gradient_percent+'%,rgba(0,0,0,0) 100%)');

    ++interval;
}, 50);

View more solutions

Comments

[Jake]

I did think of this but I'm not sure that jQuery will actually still use css transitions when you add a class dynamically.

[arik]

Oh yeah, it does. I actually do that on some projects of my own. It is not jQuery though that does the transitions.

[Dan Twining]

So I just stumbled upon this with a similar problem but I can't seem to get it to work. I've taken @arik-so 's answer and put it here A transition happens instantaneously, almost as if transition between gradients isn't supported. I edited this and it works fine with a solid background colour.

[Dan Twining]

A even better example of gradient not working, but solid working here ....maybe I'm just doing something silly that's preventing it from working?

[Dan Twining]

I think it's prob best I post this in a new question.

[Jonathan]

Can i use multiple colors in the from() to() attributes to handle more complex gradients (i.e. radial)?

[Garret Kaye]

I cant get this to work it just ignores the 5s duration

[Nathan]

CSS background gradient transitions are not supported in Chrome, FF or Safari yet. Rumor has it the latest Edge supports, but I didn't check. The jsfiddle linked to will show this to be true (the "Hover Here" works because it's transitioning between solid colors, not gradients.) The jQuery version linked to below is not only the better answer because it works, but because it answers the question more specifically.

[Sfili_81]

please add some explanation