The animationend event occurs when a CSS animation has completed.
When a CSS animation plays, there are three events that can occur:
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera object.addEventListener("animationend", myScript); // Standard syntax
<style> #DIV { margin: 25px; width: 550px; height: 100px; background: green; position: relative; font-size: 20px; color:white } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {top: 0px;} to {top: 200px;} } @keyframes mymove { from {top: 0px;} to {top: 200px;} } </style> <div id="DIV" onclick="start()">Click me to start the animation.</div> <script> var x = document.getElementById("DIV"); // Start the animation with JavaScript function start() { x.style.WebkitAnimation = "mymove 4s 2"; // Code for Chrome, Safari and Opera x.style.animation = "mymove 4s 2"; // Standard syntax } // Code for Chrome, Safari and Opera x.addEventListener("webkitAnimationStart", myStartFunction); x.addEventListener("webkitAnimationIteration", myRepeatFunction); x.addEventListener("webkitAnimationEnd", myEndFunction); // Standard syntax x.addEventListener("animationstart", myStartFunction); x.addEventListener("animationiteration", myRepeatFunction); x.addEventListener("animationend", myEndFunction); function myStartFunction() { this.innerHTML = "animationstart event occured - The animation has started"; this.style.backgroundColor = "pink"; } function myRepeatFunction() { this.innerHTML = "animationiteration event occured - The animation was played again"; this.style.backgroundColor = "lightblue"; } function myEndFunction() { this.innerHTML = "animationend event occured - The animation has completed"; this.style.backgroundColor = "lightgray"; } </script>
In above example uses the addEventListener() method to attach an "animationstart", "animationiteration" and "animationend" event to a DIV element.
<!DOCTYPE html> <html> <head> <title>How To Do Animationend Event In JavaScript With Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> h1{ color: red; } #DIV { margin: 25px; width: 550px; height: 100px; background: green; position: relative; font-size: 20px; color:white } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {top: 0px;} to {top: 200px;} } @keyframes mymove { from {top: 0px;} to {top: 200px;} } </style> <body> <div class="container"> <br> <br> <div class="text-center"> <h1> Do Animationend Event In JavaScript </h1> </div> <br> <div class="well"> <div id="DIV" onclick="myFunction()">Click me to start the animation.</div> </div> </body> </html> <script> var x = document.getElementById("DIV"); // Start the animation with JavaScript function myFunction() { x.style.WebkitAnimation = "mymove 4s 2"; // Code for Chrome, Safari and Opera x.style.animation = "mymove 4s 2"; // Standard syntax } // Code for Chrome, Safari and Opera x.addEventListener("webkitAnimationStart", myStartFunction); x.addEventListener("webkitAnimationIteration", myRepeatFunction); x.addEventListener("webkitAnimationEnd", myEndFunction); // Standard syntax x.addEventListener("animationstart", myStartFunction); x.addEventListener("animationiteration", myRepeatFunction); x.addEventListener("animationend", myEndFunction); function myStartFunction() { this.innerHTML = "animationstart event occured - The animation has started"; this.style.backgroundColor = "pink"; } function myRepeatFunction() { this.innerHTML = "animationiteration event occured - The animation was played again"; this.style.backgroundColor = "lightblue"; } function myEndFunction() { this.innerHTML = "animationend event occured - The animation has completed"; this.style.backgroundColor = "lightgray"; } </script>