TAG
CSS
Result
Run
License
<input type="checkbox" id="ckb-start" /> <label for="ckb-start">Try it</label> <div></div>
div { width: 100px; height: 100px; background: red; position: relative; border-radius: 50%; } #ckb-start:checked ~ div { animation-name: myani; animation-duration: 2s; animation-timing-function: steps(3, jump-start); animation-iteration-count: infinite; } @keyframes myani { from { left: 0; top: 0; } 25% { left: 100px; top: 50px; } 50% { left: 150px; top: 0; } 75% { left: 200px; top: 50px; } to { left: 300px; top: 0; } }
Console
expand_less
License
License
by DevDic
Close