[ACCEPTED]-How to make background gradually change colors?-background-color

Accepted answer
Score: 10

You can use CSS transitions to get that 6 effect. Just add that css code into the 5 element that is changed from js:

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

With that 4 on css each time any style value is being 3 changed that change is animated from current 2 to new value by 1s.

It works only on modern 1 browsers. See an example: click

Score: 3

Here is an example on how to animate the 4 body tag background :

function animateBg(i) {
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';

    setTimeout(function() {
        animateBg(++i)
    }, i);
}
animateBg(0);​

Keep in mind that hsl 3 isn't crossbrowser, you can also do the 2 trick with hex/rgb colors.

Jsfiddle link 1 : http://jsfiddle.net/euthg/

Score: 1

You might want to use the setTimeout() function:

function animateBg()
{
  myElement.style.backgroundColor = someNewValue;
  setTimeout(animateBg, 20); // 20 milliseconds
}

and 1 invoke animateBg() in your body's onload handler. E.g., <body onload="animateBg()">.

Score: 1

I would try using a JQuery color plugin. Look at the examples 2 here (click on Demo), they seem to do exactly 1 what you describe.

More Related questions