O'Reilly

Detecting CSS Animation Completion with JavaScript

By on  

One fact of web development life in 2014 that's been difficult for me to admit is that the traditional JavaScript toolkit is mostly dead.  For years we relied on them for almost everything but now that JavaScript and CSS has caught up with what we need, we can often avoid using JavaScript toolkits if we take the time to research new native capabilities.  One argument for sticking with toolkits that I often hear is that CSS animations don't provide callback abilities.

Wrong.  False.  Incorrect.  ¿Que?  JavaScript does provide us the ability to trigger functionality at the end of CSS animations and transitions. Here's how!

The JavaScript

The only reason this is a somewhat involved task at this point is the need to account for browser prefixes.  The transitionend event and animationend is what standardized browsers require but WebKit-based browsers still rely on prefixes so we have to determine the prefix for the event, then apply it:

/* From Modernizr */
function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
	console.log('Transition complete!  This is the callback, no library needed!');
});

/*
	The "whichTransitionEvent" can be swapped for "animation" instead of "transition" texts, as can the usage :)
*/

Once the animation or transition ends, the callback fires.  No need for a big library to assign callbacks to animations anymore!

Imageine how much in JavaScript code you can save by avoiding a JavaScript library for this.  The duration, fill-mode, and delay can all be set via CSS, so your JavaScript stays lightweight.  Major win!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • Scrolling “Agree to Terms” Component with MooTools ScrollSpy

    Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...

Discussion

  1. Hi David,

    Thanks for this post. I was trying Recently to implement a version of jQuery’s fadeIn and fadeOut using CSS animations. I experienced a certain amount of success by animating opacity. However I was stuck when trying to cleanly add and remove the element from the flow of the document. You can see my attempt here:

    http://icanmakethiswork.blogspot.co.uk/2013/12/simple-fading-in-and-out-using-css-transitions.html

    I was wondering if you had any better ideas about how to achieve this?

  2. i use this:

    var standartransitionend = (!!window.webkitURL)?'webkitTransitionEnd':'transitionend';
    

    reasoning here: https://coderwall.com/p/ey5a1w

    • I guess checking window.WebKitAnimationEvent is slightly safer.

    • Using either of these is fraught with problems. The existence of prefixed URL global (or prefixed keyframe animations) has nothing to do with the existence of prefixed css transitions. These features are turned on, unprefixed, and deprecated separately so you don’t want to assume anything.

  3. Jay Merrifield

    One issue I’ve run into a number of times is the realization that like many events in javascript, transition end events bubble! So if you’re animating an 2 elements, one inside the other, the interior element could short circuit the exterior animation. Just to be safe, I also use the propertyName field which specifies which property finished it’s animation so you can make certain if you’re animating 2 properties on the same element you react to the correct transition end event.

    The code looks like this:

    el.addEventListener(transitionEndName, function(){
        if (e.target == el && (!propertyName || e.propertyName === propertyName)) {
            // this is your completion event!
        }
    });
    
  4. I just use all of the event name options… What’s wrong with that, other than filling up unnecessary object properties?

  5. JavaScript does provide us the ability to trigger functionality at the end of <> animations and transitions.

    Change to <>?

  6. Sorry. Another try.

    JavaScript does provide us the ability to trigger functionality at the end of **JavaScript”” animations and transitions.

    Change to **CSS**?

  7. Thanks! I used it in my plugin: https://github.com/jacoborus/nanobar

  8. Paolo

    in our project we had problems like the Samsung Galaxy S3 Mini stock browser wrongly returning ‘transitionend’ instead of ‘webkitTransitionEnd’, which forced us to resort to something like this: https://gist.github.com/depoulo/9dc8f59d791ec8f8e40c

  9. Paolo
  10. Thanks Maksim and Louis – will take a look!

  11. I believe Microsft never shipped any prefixed versions of this: http://msdn.microsoft.com/en-us/library/ie/hh673535(v=vs.85).aspx#transitions_dom_events

    Do you think it’s safe to remove the MSTransitionEnd bit?

    • I just did a little testing on the animationend event and IE browsers that support animations and transitions (IE > 10) don’t require the MS prefix. http://jsfiddle.net/U853f/3/

      Similarly, the latest versions of Firefox and Opera use animationend and webkitAnimationEnd. respectively. I suspect it’s the same for transitionend?

    • I just did a little testing on the animationend event and IE browsers that support animations and transitions (IE > 10) don’t require the MS prefix. http://jsfiddle.net/U853f/3/

      Similarly, the latest versions of Firefox and Opera use animationend
      and webkitAnimationEnd, respectively. I suspect it’s the same for
      transitionend ?

      (Reposted for proper formatting.)

  12. hamburger

    I’am using this jquery-snipe:

    $('#trigger').on('webkitTransitionEnd moztransitionend transitionend oTransitionEnd', function () {
        $('#debug').html('Animation ended');
    });
    
    • I love this method. Yes, it uses jQuery, but looks so much more elegant… Thanks!

  13. Matt

    What is the importance of checking for the property name WebkitTransition instead of webkitTransition? I see they both exist, and point to the same string (=== reports true). However, why not just use webkitTransition as the property name?

  14. Beware that Webkit has a bug handling transitionEnd event for which if the CSS transitionEnd point would be equivalent to the element current point then the event would not be fired : http://stackoverflow.com/questions/2087510/callback-on-css-transition#answer-11354026

    I usually deal with this by setting a boolean check to be populated by the transitionEnd argument function which if still false, eg no event was fired, lets a setTimeout function do the same stuff

  15. I’ve struggled with using transitionEnd detection a couple of times recently – basically due to Chrome firing twice (on both transitionEnd and webkitTransitionEnd) – which was majorly messing it all up.

    In the function to detect which transition event if more that one event is supported would this return only one or both events?

  16. Paolo

    In my gist above it returns only the first supported event, due to the $.one() event listener, which clears itself after the first call.

  17. Carefull. It isn’t fired if the Element’s display becomes none.
    Btw, try to wrap the event in a Promise (I called mine addTransitionClass and removeTransitionClass). It’ s fantastic!

  18. Be carefull with this. Unfortunately, the event isn’t fired if the browser’s tab isn’t active.

    For example:
    1) launch your page in tab A and switch immediately on the tab B.
    2) transitionend event is fired when you switch back to tab A not when the transition has ended.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...