CODEWITHSUNDEEP
javascriptcsscolorstransition
Kamil
Kamil

Reputation: 53

css change color smoothly with js

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!

Upvotes: 0

Views: 591

Answers (1)

Toby
Toby

Reputation: 13395

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.

Upvotes: 1

Related Questions