<body>
  
  <div id="head">
    <div id="one" class="block">
    </div>

    <div id="two" class="block">
    </div>

    <div id="three" class="block">
    </div>

    <div id="four" class="block">
    </div>
   </div>

  </body>
    body{
      padding:2px;
      margin:2px;
      background-color:rgb(19, 132, 224);
      background-image:linear-gradient(rgba(255, 255, 255, 0),rgba(32, 33, 34, 0.76));
      background-size:auto 700px;
      background-repeat:no-repeat;
    }

    div#head{
      overflow:auto;
      margin:50px auto;
      width:500px;
      height:500px;

    }

    div.block{
      width:246px;
      height:246px;
      float:left;
      margin:2px;
      transition:all 0.5s ease-in-out;
    }


    div#one{
      background-color:rgb(186, 11, 11);
    }

    div#two{
      background-color:rgb(9, 153, 49);
    }

    div#three{
      background-color:rgb(4, 40, 82);
    }

    div#four{
      background-color:rgb(240, 217, 16);
    }
   var r=document.getElementsByClassName('block')[0];
   var g=document.getElementsByClassName('block')[1];
   var b=document.getElementsByClassName('block')[2];
   var y=document.getElementsByClassName('block')[3];

   var x=setInterval(function()
   {


   if(r.id=='one')
   {
     r.id='three';
     g.id='one';
     b.id='four';
     y.id='two';
   }

  else if(r.id=='three')
  {
    r.id='four';
    g.id='three';
    b.id='two';
    y.id='one';
  }

  else if(r.id=='four')
  {
    r.id='two';
    g.id='four';
    b.id='one';
    y.id='three';
  }

  else if(r.id=='two')
  {
    r.id='one';
    g.id='two';
    b.id='three';
    y.id='four';
  }


   }, 500)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.