JQUERY 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 }); }); /****************************/ JS ONLY var button = document.querySelector(".button"), transitionEvent = whichTransitionEvent(); button.addEventListener("click", function() { if (button.classList) { button.classList.add("animate"); } else { button.className += " " + "animate"; } button.addEventListener(transitionEvent, customFunction); }); function customFunction(event) { button.removeEventListener(transitionEvent, customFunction); // Do something when the transition ends }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter