Listening for Animation Events With JavaScript

Developer
Val Head
Size
2,727 Kb
Views
46,552
  1. Listening for Animation Events With JavaScript Previews
  2. Listening for Animation Events With JavaScript HTML Codes
  3. Listening for Animation Events With JavaScript CSS Codes
  4. Listening for Animation Events With JavaScript JS Codes

How do I make an listening for animation events with javascript?

A short demo of the very handy technique of listening for CSS animation events. (There are events for the start and end of transitions too!). What is a listening for animation events with javascript? How do you make a listening for animation events with javascript? This script and codes were developed by Val Head on 07 August 2022, Sunday.

Listening for Animation Events With JavaScript Previews
IQ Test

Listening for Animation Events With JavaScript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Listening for Animation Events With JavaScript</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {background:#000; margin:3em; color:whitesmoke; font-family: Georgia, serif; perspective: 500px; }
p {text-align: center; margin-top:3em; font-weight:bold; font-style:italic; font-size: 120%;}
.display { border-top: 1px solid #666; width:80%; margin: 3em auto; padding:1em 4%;
}
.box { width:300px; height:300px; margin:auto;
}
img { border-radius: 50%;}
.active { animation: flip .7s ease-in-out 5 alternate both;
}
@keyframes flip { 0% {transform: rotateY(-90deg);} 30% {transform: rotateY(7deg);} 60% {transform: rotateY(-7deg);} 100% {transform: rotateY(0deg);}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box"><img src="http://placekitten.com/g/300/300"></div>
<p>Click the cat to see some events!</p>
<pre class="display"></pre> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Listening for Animation Events With JavaScript - Script Codes CSS Codes

body {background:#000; margin:3em; color:whitesmoke; font-family: Georgia, serif; perspective: 500px; }
p {text-align: center; margin-top:3em; font-weight:bold; font-style:italic; font-size: 120%;}
.display { border-top: 1px solid #666; width:80%; margin: 3em auto; padding:1em 4%;
}
.box { width:300px; height:300px; margin:auto;
}
img { border-radius: 50%;}
.active { animation: flip .7s ease-in-out 5 alternate both;
}
@keyframes flip { 0% {transform: rotateY(-90deg);} 30% {transform: rotateY(7deg);} 60% {transform: rotateY(-7deg);} 100% {transform: rotateY(0deg);}
}

Listening for Animation Events With JavaScript - Script Codes JS Codes

var myAnim = document.querySelector('.box');
var disp = document.querySelector('.display');
myAnim.addEventListener('click', function(){ myAnim.classList.add('active'); });
myAnim.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
myAnim.addEventListener('animationend', onAnimationEnd, false);
myAnim.addEventListener('webkitAnimationStart', onAnimationStart, false);
myAnim.addEventListener('animationstart', onAnimationStart, false);
myAnim.addEventListener('webkitAnimationIteration', onAnimationIteration, false);
myAnim.addEventListener('animationiteration', onAnimationIteration, false);
function onAnimationEnd(e) { myAnim.classList.remove('active'); disp.textContent += "Aw, animation "+ e.animationName + " has ended :("+ "\n" ;
}
function onAnimationStart(e) { disp.textContent += "Yay! Animation "+ e.animationName + " started!!" + "\n" ;
}
function onAnimationIteration(e) { disp.textContent += "Oh, an iteration of "+ e.animationName + "," +e.elapsedTime+"s elapsed."+ "\n" ;
}
Listening for Animation Events With JavaScript - Script Codes
Listening for Animation Events With JavaScript - Script Codes
Home Page Home
Developer Val Head
Username valhead
Uploaded August 07, 2022
Rating 3.5
Size 2,727 Kb
Views 46,552
Do you need developer help for Listening for Animation Events With JavaScript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Val Head (valhead) Script Codes
Name
Nav animation exercise - START
500 coffee cup icons
Hypno triangle
3D dancing dots
Spring physics with CSS variables
Playing a CSS animation on hover
Net magazine demo - Step 3
Listening for CSS animation events
Net magazine demo - Complete
Geometric Pattern Mask
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!