How to detect element’s CSS transition end time with JavaScript? - code samples for the article from http://share.ez.no/blogs/piotr-nalepa/how-to-detect-element-s-css-transition-end-time-with-javascript

index.html

<div class="container">
    <div class="element"></div>
</div>

script.js

(function () {
    'use strict';

    var element = document.querySelector('.element');
    var loop1Count = 0;
    var loop2Count = 0;
    var loop1Max = 20;
    var loop2Max = 10;
    var interval1 = setInterval(function () {
        element.classList.toggle('is-visible');
        loop1Count++;

        if (loop1Count === loop1Max) {
            clearInterval(interval1);
        }
    }, 600);

    var interval2 = setInterval(function () {
        element.classList.toggle('move');
        loop2Count++;

        if (loop2Count === loop2Max) {
            clearInterval(interval2);
        }
    }, 1200);

    var transitionNames = [
        'webkitTransitionEnd',
        'moztransitionend',
        'oTransitionEnd',
        'transitionend'
    ];

    transitionNames.forEach(function (transition) {
        element.addEventListener(transition, function () {
            console.log('Position of element', element.getBoundingClientRect());
        });
    });
})();

style.css

body {
    width: 600px;
    margin: auto;
    font: 1em/1.4 Arial, sans-serif;
}
.container {
    background: #eee;
    position: relative;
    z-index: 1;
}
.element {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    top: 0;
    left: 0;
    background: #b30;
    margin-left: 100%;
    transition: all .5s ease-in-out;
    position: absolute;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    z-index: 2;
}
.element.is-visible {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    width: 3rem;
    height: 3rem;
}
.element.move {
    -webkit-transform: translate3d(-200%, 100%, 0);
            transform: translate3d(-200%, 100%, 0);
    width: 7rem;
    height: 7rem;
}