TAG
CSS
JavaScript
Result
Run
License
<div></div> <div></div>
div { width: 100px; height: 100px; position: relative; border-radius: 50%; animation-fill-mode: both; animation-delay: 500ms; } div:nth-of-type(1) { background: red; animation-duration: 2s; animation-name: myani; } div:nth-of-type(2) { background: blue; animation-duration: 3s; animation-name: myani2; } @keyframes myani { from { left: 0; top: 0; } 50% { top: 100px; } to { left: 300px; top: 0; } } @keyframes myani2 { from { left: 300px; top: 0; } 50% { top: 100px; } to { left: 0px; top: 0; } }
window.addEventListener("load", () => { const aAnimations = document.getAnimations(); aAnimations.forEach(ani => { ani.onfinish = e => console.log(e.currentTime); }); });
Console
expand_less
License
License
by DevDic
Close