<div class="fromto"></div>
<div class="percent"></div>
<div class="to"></div>
div{display:block; width:100px; height:100px; background:#333; display:inline-block; margin:0 1%;}

.fromto{animation:fromto 2s linear infinite;}

@keyframes fromto{
  from{border-radius:5%;}
  to{border-radius:50%;}
}
.percent{animation:percent 2s linear infinite;}

@keyframes percent{
  0%{border-radius:0;}
  50%{border-radius:50%;}
  100%{border-radius:0;}
}
.to{animation:to 2s linear infinite;}

@keyframes to{
  to{border-radius:50%;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.