How to make fading in background-color transition to bootstrap page using CSS?

background-color, css-animations, jquery, transition, twitter-bootstrap

Solution

jQuery/CSS solution

CSS: Add a class `loaded` that has the background color you want as the bg color

body {
    height: 500px;
    width: 500px;
    background-color: transparent;
}

body.loaded {
   background-color: green;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

On document ready, add the class `loaded` to your body

$(document).ready(function(){
    $("body").addClass("loaded");
});

Fiddle: http://jsfiddle.net/R3jjM/

Problem

I have page A, which bg-color is for ex. #fff. Now when I click a link and proceed to page B, the bg-color is `.body {background-color: #007F46;}` As you might guess, the change from white to this greenish color is quite sudden. Is there any way to make a transition-kind thing that when my page loads, it changes the color automatically from #fff to #color-here at duration X. Doesn't matter if it's accomplished by CSS or jquery. There is all the :hover stuff, but I don't think that it is very convenient, as my page B might be in a tab of the browser and then every time when you open the that, the color will change. So in nutshell - anyone have a solution for "page loads" -> "bg-color is white" -> "bg-color changes to green in .5s". -> end of story, no changing again until I reload the page/restart browser.

Original source