Smooth color transistion on page load

Question

I have three divs:

#box1 {
  margin-left: auto;
  margin-right: auto;
    background-color:#f1c40f;
text-align: center;
    }

  #box2{

  margin-left: auto;
  margin-right: auto;
    background-color:#f39c12;
text-align: center; 
  }

    #box3{

  margin-left: auto;
  margin-right: auto;
    background-color:#e67e22;
    text-align: center; 
  }

I want their background colors to transition to some random color. High level pseudo code would be something like this:

1. get element

   var my_div = document.getElementById("box1");

2. pick random color (Random color generator in JavaScript)

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

3. transition div color slowly to new color - this smooth transition step is what puzzles me most

Answer 1

Add transition to your elements in the css (specify property, duration and type):

#box1 {
    margin-left: auto;
    margin-right: auto;
    background-color:#f1c40f;
    text-align: center;
    -webkit-transition: background-color 3s ease-in-out;
    -moz-transition: background-color 3s ease-in-out;
    -o-transition: background-color 3s ease-in-out;
    transition: background-color 3s ease-in-out;
    }

Then on page load, get all the boxes and change their background color:

window.onload = function() {
  var divs = document.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.backgroundColor = getRandomColor();
  }
}

Check this plunker