@Keyframes Timer

Timer

HTML

<body>
<div class="container">
  <span class="text">Home</span>
  <div class="dial"></div>
</div>
</body>

CSS

body{
  background-color: #ADEAFF;
  padding:10%;
}

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 90px;
  left: 90px;
  z-index: 2;
}

.dial {
  width: 200px;
  height: 200px;
  background-color: #eff0f2;
  border-radius:50% 50% 50% 0;
  box-shadow: 2px 3px 8px #aaa, inset 5px 3px 8px #fff;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

@keyframes square-to-circle {
  0%  {
    transform:rotate(0deg);
  }
  5%  {
    transform:rotate(10deg);
  }
  10%  {
    transform:rotate(20deg);
  }
  15%  { 
    transform:rotate(30deg);
  }
  20% {  
    transform:rotate(40deg);
  }
   25% {  
    transform:rotate(50deg);
  }
     30% {  
    transform:rotate(60deg);
  }
     35% {  
    transform:rotate(70deg);
  }
     40% {  
    transform:rotate(80deg);
  }
     45% {  
    transform:rotate(90deg);
  }
     50% {  
    transform:rotate(100deg);
  }
     55% {  
    transform:rotate(110deg);
  }
     60% {  
    transform:rotate(120deg);
  }
     65% {  
    transform:rotate(130deg);
  }
     70% {  
    transform:rotate(140deg);
  }
     75% {  
    transform:rotate(150deg);
  }
     80% {  
    transform:rotate(160deg);
  }
     85% {  
    transform:rotate(170deg);
  }
     90% {  
    transform:rotate(180deg);
  }
     95% {  
    transform:rotate(190deg);
  }
     100% {  
    transform:rotate(200deg);
  }
  
}