HTML | DOM AnimationEvent
In the HTML document, AnimationEvent interface is used to represent events providing information related to animations. AnimationEvent contains properties such as animationName, elapsedTime and pseudoElement.
- animationName: The animationName property returns the name of the event animation. It returns the value of the animation-name CSS property associated with the transition.
Syntax:event.animationName;
Return Type: It returns a string which represents the name of the animation.
Example-1:
<!DOCTYPE html><html><head><style>div {width: 550px;height: 50px;background: green;position: relative;-webkit-animation-name: animate;/* Chrome, Safari, Opera */-webkit-animation-duration: 5s;/* Chrome, Safari, Opera */animation-name: animate;animation-duration: 5s;}/* Chrome, Safari, Opera */@-webkit-keyframes animate {from {top: 0px;}to {top: 500px;}}@keyframes animate {from {top: 0px;}to {top: 500px;}}</style></head><body><divid="div1"></div><script>var x = document.getElementById("div1");// Code for Chrome, Safari and Operax.addEventListener("webkitAnimationStart", StartAnimation);// Standard syntaxx.addEventListener("animationstart", StartAnimation);// Return animation namefunction StartAnimation(event) {this.innerHTML ="The animation-name is:"+ event.animationName;}</script></body></html>Output:
- elapsedTime: The elapsedTime property returns the number of seconds for which an animation has been running in an animation event.
Syntax:
event.elapsedTime;
Return Type: It returns a number which represents the number of seconds for which an animation has been running.
Example-2:
<!DOCTYPE html><html><head><style>div {width: 50px;height: 50px;background: green;position: relative;/* Chrome, Safari, Opera */-webkit-animation: animate 4s infinite;animation: animate 4s infinite;}/* Chrome, Safari, Opera */@-webkit-keyframes animate {from {left: 500px;}to {left: 0px;}}@keyframes animate {from {left: 500px;}to {left: 0px;}}</style></head><body><divid="div1"></div><script>var x = document.getElementById("div1");// Code for Chrome, Safari and Operax.addEventListener("webkitAnimationIteration", RepeatAnimation);// Standard syntaxx.addEventListener("animationiteration", RepeatAnimation);function RepeatAnimation(event) {this.style.backgroundColor ="lightgreen";this.innerHTML = "Elapsed time: "+ event.elapsedTime + " seconds";}</script></body></html>Output:
Supported Browsers:
- Google Chrome 43 and above
- Edge 12 and above
- Mozilla Firefox 5 and above
- Internet Explorer 10 and above
- Safari 9 and above
- Opera 30 and above
Please Login to comment...