<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%;}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.