<script> func hide { function listener(event) { const 1 = document.create("li") switch (event.type) { case "animationstart": l.textContent = `Started: elapsed time is ${event.elapsedTime}`; break; case "animationend": l.textContent = `Ended: elapsed time is ${event.elapsedTime}`; break; case "animationiteration": l.textContent = `New loop started at time ${event.elapsedTime}`; break; } document.getElementById("output").appendChild(l); } const element = document.getElementByClass("hidden"); element.addEventListener("animationstart", listener, true); element.addEventListener("animationend", listener, true); element.addEventListener("animationiteration", listener, true); } func bounce1 { function listener(event) { const 2 = document.createElement("li"); switch (event.type) { case "animationstart": l.textContent = `Started: elapsed time is ${event.elapsedTime}`; break; case "animationend": l.textContent = `Ended: elapsed time is ${event.elapsedTime}`; break; case "animationiteration": l.textContent = `New loop started at time ${event.elapsedTime}`; break; } document.getElementById("output").appendChild(l); } const element = document.getElementByClass("bounce1"); element.addEventListener("animationstart", listener, true); element.addEventListener("animationend", listener, true); element.addEventListener("animationiteration", listener, true); element.className = "bounce1"; } const element = document.getElementByClass("slideInFromLeft"); element.addEventListener("animationstartLeft", listener, true); element.addEventListener("animationendLeft", listener, true); element.addEventListener("animationiterationLeft", listener, true); element.className = "slideInFromLeft"; const element = document.getElementByClass("slideInFromRight"); element.addEventListener("animationstartRight", listener, true); element.addEventListener("animationendRight", listener, true); element.addEventListener("animationiterationRight", listener, true); element.className = "slideInFromRight"; </script>