Detecting specific CSS keyframe animation with jQuery event

Question

I have two CSS animations @keyframe applied to the same element. The one that fires on :hover and the other that fires when the mouse is output is applied with CSS.

I was curious to know if there is a way to detect the end of the selected keyframe animation, rather than sticking to the element and firing twice.

Answer 1

if there was a way to detect the end of the selected keyframe animation

If you intend to detect the end of the keyframe animation itself , rather than detect the end of each keyframe, then yes, this can be done using the animationend event . This event is fired every time the entire animation attached to the element completes, and the context information has one parameter called animationName , with which we can find which animation ended.

The animationName parameter is important because when several animations are applied to the same element as in your case, you need to know which animation really ended, because this event will be fired at the end of each animation.

Using Vanilla JS:

 window.onload = function() { var elm = document.querySelector('.animate'); var op = document.querySelector('.output'); elm.addEventListener('animationend', function(e) { /* this is fired at end of animation */ op.textcontent = 'Animation ' + e.animationName + ' has ended'; }); elm.addEventListener('animationstart', function(e) { /* this is fired at start of animation */ op.textcontent = 'Animation ' + e.animationName + ' has started'; }); } 

 .animate { height: 100px; width: 100px; margin: 10px; border: 1px solid red; animation: shake-up-down 2s ease; } .animate:hover { animation: shake-left-right 2s ease forwards; } @keyframes shake-up-down { 0% { transform: translateY(0px); } 25% { transform: translateY(10px); } 75% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes shake-left-right { 0% { transform: translateX(0px); } 25% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0px); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='animate'></div> <div class='output'></div> 

---

Using jQuery:

 $(document).ready(function() { var elm = $('.animate'); var op = $('.output'); elm.on('animationend', function(e) { /* fired at the end of animation */ op.html('Animation ' + e.originalEvent.animationName + ' has ended'); }); elm.on('animationstart', function(e) { /* fired at the start of animation */ op.html('Animation ' + e.originalEvent.animationName + ' has started'); }); }); 

 .animate { height: 100px; width: 100px; margin: 10px; border: 1px solid red; animation: shake-up-down 2s ease; } .animate:hover { animation: shake-left-right 2s ease forwards; } @keyframes shake-up-down { 0% { transform: translateY(0px); } 25% { transform: translateY(10px); } 75% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes shake-left-right { 0% { transform: translateX(0px); } 25% { transform: translateX(10px); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0px); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class='animate'></div> <div class='output'></div> 

In the above snippet, you can see how the contents of the .output div indicates the name of the animation that ends after each animation finishes.

Note. CSS animations in some browsers / versions still require vendor prefixes. To be on the safer side, you also need to listen to the prefix versions of the animation event.

Answer 2

Try this example:

 function whichAnimationEvent(){ var t, el = document.createElement("fakeelement"); var animations = { "animation" : "animationend", "OAnimation" : "oAnimationEnd", "MozAnimation" : "animationend", "WebkitAnimation": "webkitAnimationEnd" } for (t in animations){ if (el.style[t] !== undefined){ return animations[t]; } } } var animationEvent = whichAnimationEvent(); $(".button").click(function(){ $(this).addClass("animate"); $(this).one(animationEvent, function(event) { // Do something when the animation ends }); });