Coding (Copy) — i am rob

<body>
   <div class="yellow">
   </div>
   <div class="aqua">
   </div>
   <div class="pink">
   </div>
   <div class="red">
   </div>
</body>

body {
   padding: 0px;
   margin: 0px;
   border-radius: 100px;
}

.pink {
   width: 300px;
   height: 300px;
   opacity: 0.7;
   background-color: pink;
   position: absolute;
   animation-name: pink;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}

.yellow {
   width: 300px;
   height: 300px;
   opacity: 0.6;
   background-color: yellow;
   position: relative;
   animation-name: yellow;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}

.red {
   width: 300px;
   height: 300px;
   opacity: 0.6;
   background-color: red;
   position: absolute;
   animation-name: red;
   animation-duration: 5s;
   animation-iteration-count: infinite;
}

.aqua {
   width: 300px;
   height: 300px;
   opacity: 0.5;
   background-color: aqua;
   position: absolute;
   animation-name: aqua;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   z-index: 6;
}

@keyframes yellow {
    0%   {left: 0px; top: 0px; transform: rotate(0deg); border-radius: 0px;}
    25%  {left: 250px; top: 0px; transform: rotate(90deg); border-radius: 75px;}
    50%  {left: 250px; top: 250px; transform: rotate(180deg); border-radius: 100px;}
    75%  {left: 0px; top: 250px; transform: rotate(270deg); border-radius: 75px;}
    100% {left: 0px; top: 0px; transform: rotate(360deg); border-radius: 0px}
}

@keyframes pink {
    0%   {left: 250px; top: 0px; transform: rotate(0deg); border-radius: 0px;}
    25%  {left: 0px; top: 0px; transform: rotate(-90deg); border-radius: 75px;}
    50%  {left: 0px; top: 250px; transform: rotate(-180deg); border-radius: 100px;}
    75%  {left: 250px; top: 250px; transform: rotate(-270deg); border-radius: 75px;}
    100% {left: 250px; top: 0px; transform: rotate(-360deg); border-radius: 0px;}
}

@keyframes aqua {
    0%   {left: 250px; top: 250px; transform: rotate(0deg); border-radius: 0px;}
    25%  {left: 0px; top: 250px; transform: rotate(90deg); border-radius: 75px;}
    50%  {left: 0px; top: 0px; transform: rotate(180deg); border-radius: 100px;}
    75%  {left: 250px; top: 0px; transform: rotate(270deg); border-radius: 75px;}
    100% {left: 250px; top: 250px; transform: rotate(360deg); border-radius: 0px;}
}

@keyframes red {
    0%   {left: 0px; top: 250px; transform: rotate(0deg); border-radius: 0px;}
    25%  {left: 250px; top: 250px; transform: rotate(-90deg); border-radius: 75px;}
    50%  {left: 250px; top: 0px; transform: rotate(-180deg); border-radius: 100px;}
    75%  {left: 0px; top: 0px; transform: rotate(-270deg); border-radius: 75px;}
    100% {left: 0px; top: 250px; transform: rotate(-360deg); border-radius: 0px;}
}

See the Pen Flat Clock by Rob Garner (@robertgarner1) on CodePen.