How To Do Animationend Event In JavaScript With Example

Posted By Bajarangi soft , Posted On 29-09-2020

In Java Script HTML DOM events allow to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

How To Do Animationend Event In JavaScript With Example

The animationend event occurs when a CSS animation has completed.

When a CSS animation plays, there are three events that can occur:

animationstart - occurs when the CSS animation has started
animationiteration - occurs when the CSS animation is repeated
animationend - occurs when the CSS animation has completed

Syntax and Usage

object.addEventListener("webkitAnimationEnd", myScript);  // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript);        // Standard syntax

Example(1)

<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.

Complete code for Do Animationend Event In JavaScript

<!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>

Related Post