How to do after a while the color of a div change

I do not know if it's useful for you, but depending on the case you can do it with CSS using key-frames.

  

Demo: link

HTML:

<div class="sua-div-aqui">
</div>

CSS:

.sua-div-aqui{
  height: 200px;
  width: 200px;
  // AQUI VOCÊ CHAMA A ANIMAÇÃO
  animation:         nome-animacao 150s steps(1) infinite; /* IE 10+, Fx 29+ */
}

nome-animacao is the name of the key-frame, 150s is the total duration, steps(1) is to block the effect of cubic- bezier and infinite to keep repeating the animation when it is finished.

The colors you would define within the key-frame:

@keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}

  

Note that we have defined 150s previously, dividing by 5 colors is   equal to 30 seconds each color.

Whenever you want to add a color or remove, you should redo these calculations. In the end, of course, it's easier to do this with Javascript. I just wanted to show you another way to do this without programming.

$(document).ready(function () {
    var adicionaClasse = function(){
      $("#ControleID").addClass("ClasseAqui");
    };

    setTimeout(adicionaClasse, 2000);
});

OR

$(document).ready(function () {
    setTimeout(function(){
      $("#ControleID").addClass("ClasseAqui");
    }, 2000);
});