div {
    margin: 20vh auto;
    width: 200px;
    height: 200px;
    background-color: coral;
    animation: square-to-circle 4s 2s infinite  alternate;
}

@keyframes square-to-circle {
    0%  {
      border-radius:0 0 0 0;
      background:coral;
      transform:rotate(0deg);
    }
    25%  {
      border-radius:50% 0 0 0;
      background:darksalmon;
      transform:rotate(45deg);
    }
    50%  {
      border-radius:50% 50% 0 0;
      background:indianred;
      transform:rotate(90deg);
    }
    75%  { 
      border-radius:50% 50% 50% 0;
      background:lightcoral;
      transform:rotate(135deg);
    }
    100% {  
      border-radius:50%;
      background:darksalmon;
      transform:rotate(180deg);
    }
  }