In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, and changes in an element like resizing, or errors that happen when an app is running, etc. We can assign an event handler to handle these events. Events that happen to DOM elements can be handled by assigning an event handler to properties of the DOM object for the corresponding events. In this part, we take a close look at the onanimationstart event handler and the animationstart event.

onanimationstart

We can assign our own event handler function to the onanimation property if we want to handle the situation when a CSS animation starts to play, which is when animationstart event is triggered. We can create an animation with CSS that animates a box by first creating the HTML elements that will be animated like in the following code:

<div id='container'>  
  <div id='box'> </div>  
</div>

Then we add some styling to the elements and create the animation with CSS like in the following code:

#box {  
  width: 100px;  
  height: 100px;  
  left: 0;  
  top: 0;  
  border: 1px solid red;  
  margin: 0;  
  position: relative;  
  background-color: red;  
  display: block;  
  justify-content: center;  
  animation: 5s resizeBox;  
}#container {  
  height: 500px;  
}[@keyframes](http://twitter.com/keyframes) resizeBox {  
  from {  
    transform: translateX(100%) scaleX(3);  
  } to {  
    transform: translateX(0) scaleX(1);  
  }  
}

In the code above, we change the box size to 100 pixels by 100 pixels., change the fill color to red, and then put the box in the top left corner of our page. Then we create the resizeBox animation by horizontally scaling the box by 3 times and then shrink back to the original size. We repeat this for 5 seconds. After we create the animation in the CSS code, we can set the event handler to the onanimationstart property with the following code:

document.onanimationstart = (event) => {  
  console.log(event);  
  console.log('Animation starts');  
};

When the event handler function above is run, then we get the AnimationEvent object in the parameter of the event handler function. It inherits the properties from the Event object which have the following properties:

• bubbles — is a read-only boolean property that indicates whether the event bubbles up through the DOM tree or not.
• cancelBubble — is a historical alias to the stopPropagation method. Setting its value to true before returning from an event handler prevents the propagation of the event.
• cancelable — is a read-only boolean property indicating whether the event can be cancelled.
• composed — is a read-only boolean property that indicates whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
• currentTarget — is a read-only property that references currently registered target for the event. This is the object to which the event is currently slated to be sent to, but it’s possible that this has been changed along the way through retargeting.
• deepPath — is an array of DOM Nodes through which the event has bubbled.
• defaultPrevented — is a read-only boolean property that indicates whether or not event.preventDefault() has been called on the event.
• eventPhase — is a read-only property that indicates which phase of the event flow is being processed.
• explicitOriginalTarget — is a read-only property that has an explicit original target of the event. This property is only available in Mozilla browsers.
• originalTarget — is a read-only property that has the original target of the event, before any retargeting. This property is only available in Mozilla browsers.
• returnValue — is a historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use preventDefault() and defaultPrevented instead for cancelling events and checking if events are cancelled, but you can use returnValue if you choose to do so.
• srcElement — is anon-standard alias from old versions of Microsoft Internet Explorer for target, which is starting to be supported in some other browsers for web compatibility purposes.
• target — is a read-only property that is a reference to the target to which the event was originally dispatched.
• timeStamp — is a read-only that has the time at which the event was created (in milliseconds). By specification, this value is the time since January 1, 1970, but in reality browsers’ definitions vary.
• type — is a read-only property that has the name of the event (case-insensitive).
• isTrusted — is a read-only property that indicates whether or not the event was initiated by the browser after user interaction or by a script using an event creation method like initEvent.

The list above is a partial of properties. It only contains the value properties of the Event object. The AnimationEvent inherit the properties and add its own properties, which are the following:

• animationName — is a read-only property that returns a string that contains the value of the animation-name of the CSS animation.
• elapsedTime — a read-only float property that has the amount of time that the animation has been running in seconds as of the time the event is being triggered. For the animationstart event the elapsedTime is 0.0 unless there was a negative value for the animation-delay CSS attribute, which in that case the event will be fired with elapsedTime of minus one multiplied by the delay.
• pseudoElement — a string read-only property that starts with :: containing the name of the pseudo-element that the animation runs on. If the animation isn’t running in a pseudo-element then the value of this property will be an empty string.

If we run the code above, we should get the following AnimationEvent object logged:

animationName: "resizeBox"  
bubbles: true  
​cancelBubble: false  
​cancelable: false  
​composed: false  
​currentTarget: null  
​defaultPrevented: false  
​elapsedTime: 0  
​eventPhase: 0  
​explicitOriginalTarget: <div id="box">  
​isTrusted: true  
​originalTarget: <div id="box">  
​pseudoElement: ""  
​returnValue: true  
​srcElement: <div id="box">​target: <div id="box">  
​timeStamp: 297  
​type: "animationstart"

As we can see the animationName is “resizeBox” which is the name of our CSS animation. The elapsedTime is 0 since we’re logging this Event object in an onanimationstart event handler and our animation don’t have a negative delay.pseudoElement is an empty string since we aren’t running our animation in any pseudo-element.

This property and the animationstart is a work in progress. The event handler is run only in Firefox. It doesn’t run in Chrome or other popular modern browsers. This means that this shouldn’t be relied upon in production environments if we want it to work on anything other than Firefox.

The animationstart event is triggered when the CSS animation starts. It’s only triggered in Firefox so far and the work to standardize this event is ongoing. It’s handy for getting the start event and the elapsed time of when the animation starts running and the name of the animation that’s running.