awesome.css

.orange1{
  -webkit-animation-name: orangePulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count:1;
}

@-webkit-keyframes orangePulse {
  from { background-color: #FAD2A5; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #DE7A09; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #FAD2A5; -webkit-box-shadow: 0 0 9px #333; }
}


/*  end  8*/

.pink1{

  -webkit-animation-name: pinkPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count:1;
}


@-webkit-keyframes pinkPulse {
  from { background-color: #FFBFFD; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #D402CE; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #FFBFFD; -webkit-box-shadow: 0 0 9px #333; }
}


/*  end  8*/

/* start */
.blue1{

  -webkit-animation-name: bluePulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count:1;
}


@-webkit-keyframes bluePulse {
  from { background-color: #B6BCFA; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #0B33D6; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #B6BCFA; -webkit-box-shadow: 0 0 9px #333; }
}


/* end */

/* start */
.yellow1{

  -webkit-animation-name: yellowPulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count:1;
}


@-webkit-keyframes yellowPulse {
  from { background-color: #FFFDD1; -webkit-box-shadow: 0 0 9px #333; }
  50% { background-color: #8F8500; -webkit-box-shadow: 0 0 18px #91bd09; }
  to { background-color: #FFFDD1; -webkit-box-shadow: 0 0 9px #333; }
}


/* end */

.startbutton{
  height:40px;
  width:100px;
  background-color:black;
  color:white;


}
.startbutton:active{
  background-color:red;
}

.resetbutton{
  height:40px;
  width:100px;
  background-color:pink;

}

.tile4{
   margin:50px;
  height:200px;
  width:200px;
  background-color:#FAD2A5;

}

.tile1{
   margin:50px;
  height:200px;
  width:200px;
  background-color:#FFBFFD;
}
.tile2{
   margin:50px;
  height:200px;
  width:200px;
  background-color:#B6BCFA;
}

.tile3{
   margin:50px;
  height:200px;
  width:200px;
  background-color:#FFFDD1;
}

awesome.js

var n=0;
var orangeDropDown;
var pinkDropDown;
var blueDropDown;
var yellowDropdown;

var tofollow =[];
function orangeFunction(){
  orangeDropDown.classList.remove("orange1");
}

function pinkFunction(){
  pinkDropDown.classList.remove("pink1");
}

function blueFunction(){
  blueDropDown.classList.remove("blue1");
}


function yellowFunction(){
  yellowDropDown.classList.remove("yellow1");
}

$( document ).ready(function() {
    document.getElementById("next").addEventListener("click", count);
});


function count(){
  n = n +1;

  for(var i=1;i<=n;i++)
          {
           var numb =   Math.floor((Math.random() * 4) + 1);

           tofollow.push("tile"+numb);
          }


   for(var i = 0;i<=n-1;i++){

               setTimeout(function(){
                 if(tofollow[i]=="tile4")
                         {
                           orangeDropDown = document.querySelector("#tile4");
                          orangeDropDown.classList.add("orange1");
                           console.log("tile4");
                           setTimeout(orangeFunction, 3000);


                         }

                  if(tofollow[i]=="tile1")
                          {
                            pinkDropDown = document.querySelector("#tile1");
                          pinkDropDown.classList.add("pink1");
                          console.log("tile1");
                          setTimeout(pinkFunction, 3000);
                          }

                  if(tofollow[i]=="tile2")
                          {
                            blueDropDown = document.querySelector("#tile2");
                          blueDropDown.classList.add("blue1");
                          console.log("tile2");
                          setTimeout(blueFunction, 3000);
                          }
                  if(tofollow[i]=="tile3")
                          {
                            yellowDropDown = document.querySelector("#tile3");
                          yellowDropDown.classList.add("yellow1");
                          console.log("tile3");
                          setTimeout(yellowFunction, 3000);
                          }

                  ;

               },5000);
  }
}

inde.html

<html lang="en">
<meta charset="UTF-8">
    <title>Ankur's simon game</title>
    <body>

      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">

        <div id="tile4" class="btn btn-primary tile4">
          </div>

        <div id="tile1" class="btn btn-primary tile1">
          </div>

        </div>
        <div class="col-sm-3"></div>
      </div>

      <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">

        <div id="tile2" class="btn  tile2">
          </div>

        <div id ="tile3" class="btn tile3">
          </div>

        </div>
        <div class="col-sm-3"></div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          this is cool

        </div>

        <div class="col-sm-6">

          <div class="btn startbutton">
            start
          </div>
          <div class="btn resetbutton">
            reset
          </div>
          <div class="col-sm-3">
          </div>
        </div>
        <button id="next" class="tile6">Next
                  </button>

        </body>

    <footer>
        <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="awesome.css">
        <script src="awesome.js"></script>
    </footer>
</html>