css change color smoothly with js

Question

I have a js code which changes a css color, but my problem is, that i wan't to change the color smoothly.

HTML:

<html id="html">

Here is the css:

html{
    background:radial-gradient(circle, #ffffff, #aaaaaa);
    transition:all 5s linear;
}

And thats the simple js:

function changecolor(r,g,b){
    var bg = document.getElementById("html");
    bg.style.backgroundImage = 'radial-gradient(circle, #ffffff, #'+r+g+b+ ')';
};

And then somewhere in the code:

changecolor(9,0,0);

The color changes perfectly but the transition isn't working. Like I said before I want the color to change smoothly.

Can anyone help me please? Thanks!

Possible duplicate of [Use CSS3 transitions with gradient backgrounds](http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds) — Arnauld, Jul 24 '16 at 12:27

score 1 · Answer 1 · answered Jul 24 '16 at 12:43

I believe using javascript to set the CSS means the transition is bypassed. I'd recommend using javascript to set the class and then use CSS to manage the styling:

function changecolor(r,g,b){
    var bg = document.getElementById("html");
    bg.className = "alt-bg";
};

CSS:

.alt-bg {
  background-image: styles-here;
}

Note: this does not take into account your setting the colors through variables, it's dependent upon your specific needs whether this will work for you. IMO it's better to add/remove classes and figure out a way to make the colours variable elsewhere if at all possible.

css change color smoothly with js

1 Answers1