<body> <div class="yellow"> </div> <div class="aqua"> </div> <div class="pink"> </div> <div class="red"> </div> </body>
body { padding: 0px; margin: 0px; border-radius: 100px; } .pink { width: 300px; height: 300px; opacity: 0.7; background-color: pink; position: absolute; animation-name: pink; animation-duration: 5s; animation-iteration-count: infinite; } .yellow { width: 300px; height: 300px; opacity: 0.6; background-color: yellow; position: relative; animation-name: yellow; animation-duration: 5s; animation-iteration-count: infinite; } .red { width: 300px; height: 300px; opacity: 0.6; background-color: red; position: absolute; animation-name: red; animation-duration: 5s; animation-iteration-count: infinite; } .aqua { width: 300px; height: 300px; opacity: 0.5; background-color: aqua; position: absolute; animation-name: aqua; animation-duration: 5s; animation-iteration-count: infinite; z-index: 6; } @keyframes yellow { 0% {left: 0px; top: 0px; transform: rotate(0deg); border-radius: 0px;} 25% {left: 250px; top: 0px; transform: rotate(90deg); border-radius: 75px;} 50% {left: 250px; top: 250px; transform: rotate(180deg); border-radius: 100px;} 75% {left: 0px; top: 250px; transform: rotate(270deg); border-radius: 75px;} 100% {left: 0px; top: 0px; transform: rotate(360deg); border-radius: 0px} } @keyframes pink { 0% {left: 250px; top: 0px; transform: rotate(0deg); border-radius: 0px;} 25% {left: 0px; top: 0px; transform: rotate(-90deg); border-radius: 75px;} 50% {left: 0px; top: 250px; transform: rotate(-180deg); border-radius: 100px;} 75% {left: 250px; top: 250px; transform: rotate(-270deg); border-radius: 75px;} 100% {left: 250px; top: 0px; transform: rotate(-360deg); border-radius: 0px;} } @keyframes aqua { 0% {left: 250px; top: 250px; transform: rotate(0deg); border-radius: 0px;} 25% {left: 0px; top: 250px; transform: rotate(90deg); border-radius: 75px;} 50% {left: 0px; top: 0px; transform: rotate(180deg); border-radius: 100px;} 75% {left: 250px; top: 0px; transform: rotate(270deg); border-radius: 75px;} 100% {left: 250px; top: 250px; transform: rotate(360deg); border-radius: 0px;} } @keyframes red { 0% {left: 0px; top: 250px; transform: rotate(0deg); border-radius: 0px;} 25% {left: 250px; top: 250px; transform: rotate(-90deg); border-radius: 75px;} 50% {left: 250px; top: 0px; transform: rotate(-180deg); border-radius: 100px;} 75% {left: 0px; top: 0px; transform: rotate(-270deg); border-radius: 75px;} 100% {left: 0px; top: 250px; transform: rotate(-360deg); border-radius: 0px;} }
See the Pen Flat Clock by Rob Garner (@robertgarner1) on CodePen.