TAG
CSS
JavaScript
Result
Run
License
<div id="box" class="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 1000ms 5; } @keyframes myani { from { left: 0px; } to { left: 100px; } }
window.addEventListener("load", () => { let elBox = document.querySelector("#box"); elBox.onclick = e => { var el = e.currentTarget; el.classList.add("add-animation"); }; elBox.addEventListener("animationiteration", e => { let addEl = document.createElement('p'); addEl.textContent = "animationiteration fired"; document.body.append(addEl); }); });
Console
expand_less
License
License
by DevDic
Close