Rotation in CSS3, from circle to square

HTML
<div></div>
CSS
body { background: azure; } div { position: absolute !important; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; background-color: coral; animation: transformieren 2s infinite alternate; } @keyframes transformieren { 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); } }
JAVASCRIPT
Expand for more options Login