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 500ms 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("animationstart", e => { elBox.textContent = "Go"; }); });
Console
expand_less
License
License
by DevDic
Close