FW #522720

HTML
<div class="parent"> <div class="child"> > </div> </div>
CSS
.parent { width: 500px; height: 500px; position: relative; background: rgb(200, 200, 255); } .child { position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background: #fff; color: #000; animation: 5s anim infinite; } @keyframes anim { 0% { left: 0; bottom: 0; transform: rotate(0); } 25% { left: calc(100% - 50px); bottom: 0; transform: rotate(-90deg); } 50% { transform: rotate(-180deg); bottom: calc(100% - 50px); left: calc(100% - 50px); } 75% { transform: rotate(-270deg); left: 0; bottom: calc(100% - 50px); } 100% { transform: rotate(-360deg); bottom: 0; left: 0; } }
JAVASCRIPT
Expand for more options Login