TAG
CSS
Result
Run
License
<input type="checkbox" id="ckb-start" /> <label for="ckb-start">Try it</label> <div>500ms</div> <div>1000ms</div> <div>1500ms</div>
div { width: 100px; height: 100px; line-height: 100px; background: red; position: relative; border-radius: 50%; text-align: center; color: #FFF; } #ckb-start:checked ~ div { /*나머지 속성은 생략되어 기본 값으로 처리된다.*/ animation: myani infinite; } #ckb-start:checked ~ div:nth-of-type(1) { animation-duration: 500ms; } #ckb-start:checked ~ div:nth-of-type(2) { animation-duration: 1000ms; } #ckb-start:checked ~ div:nth-of-type(3) { animation-duration: 1500ms; } @keyframes myani { from { left: 0; top: 0; } to { left: 300px; top: 0; } }
Console
expand_less
License
License
by DevDic
Close