HTML DOM AnimationEvent

HTMLWeb DevelopmentFront End Technology

The HTML DOM AnimationEvent is an object in JavaScript handling the events that occur when CSS animation runs. It basically provides us information about the events that are related to the animation. It offers us a greater control over the CSS animations. It represents the relation between events and animation by describing which events triggered the animations.

Properties

Following are the properties for Animation Event −

PropertyDescription
animationNameIt will return the name of the animation being executed.
elapsedTimeReturns the time elapsed since animation is running in seconds.
pseudoElementIt returns the name of the pseudo-element of the animation. Eg: ::before, ::after, ::first-line etc.

Syntax

Following is the syntax for animationEvent −

animationEvent.property

Example

Let us see an example for animationEvent −

<!DOCTYPE html>
<html>
<head>
<style>
   #ANIM-DIV {
      margin: 10px;
      width: 400px;
      height: 100px;
      background: lightgreen;
      position: relative;
      font-size: 30px;
      animation-name: animMove;
      animation-duration: 5s;
   }
   @-webkit-keyframes animMove {
      from {top: 0px;}
      to {top: 200px;}
   }
</style>
</head>
<body>
<div id="ANIM-DIV"></div>
<script>
   var x = document.getElementById("ANIM-DIV");
   x.addEventListener("animationstart", myAnimFunction);
   function myAnimFunction(event) {
      this.innerHTML = "The animation-name is: " + event.animationName;
   }
</script>
</body>
</html>

Note − This was tested on chrome 74.0.3729.169 .Check your browser compatibility for animationEvent.

Output

It will produce the following output −

After 5s, the element will shift downwards −

In the above example −

We have created a 400px X 100px rectangular box by using a div.

#ANIM-DIV {
   margin: 10px;
   width: 400px;
   height: 100px;
   background: lightgreen;
   position: relative;
   font-size: 30px;
   animation-name: animMove;
   animation-duration: 5s;
}

We have then specified the start and end position between which the div will move to animate −

@-webkit-keyframes animMove {
   from {top: 0px;}
   to {top: 200px;}
}
raja
Published on 06-Aug-2019 16:14:24
Advertisements