TAG
CSS
JavaScript
Result
Run
License
<div id="box">Click me</div>
#box { width: 70px; height: 70px; background: #FF0000; border-radius: 50%; position: relative; color: #FFF; text-align: center; line-height: 70px; } .add-animation { animation: myani 200ms both; } @keyframes myani { from { left: 0px; } to { left: 100px; } }
window.addEventListener("load", () => { let elBox = document.querySelector("#box"); elBox.onclick = e => { e.currentTarget.classList.toggle("add-animation"); }; // 이벤트 버블링 처리 window.addEventListener("animationend", e => { document.body.style.backgroundColor = "#FFFF00"; }); });
Console
expand_less
License
License
by DevDic
Close