I have the following code and my problem is that the transitionend event is fired twice. I don't know what's causing this. I suspected the vendor prefixes caused it, but they don't. Even if I only leave transitionend and transition it will still fire twice.

CSS

transition: 1s ease-out;

JS

document.addEventListener('click', function (e) {

    var submarine = document.querySelector('.submarine');

    var submarineX = e.clientX - submarine.offsetWidth / 2;

    var submarineY = e.clientY - submarine.offsetHeight / 2;



    submarine.style.left = submarineX + px;

    submarine.style.top = submarineY + px;

});



document.addEventListener('transitionend', function (event) {

    console.log(event.type +   + new Date().getTime());

});

Fiddle

document.addEventListener('transitionend', function (event) {

    console.log(event.type +   + new Date().getTime());

});



document.addEventListener('click', function (e) {

    var submarine = document.querySelector('.submarine');

    var submarineX = e.clientX - submarine.offsetWidth / 2;

    var submarineY = e.clientY - submarine.offsetHeight / 2;



    submarine.style.left = submarineX + px;

    submarine.style.top = submarineY + px;

});

.submarine {

    position: absolute;

    top: 0;

    left: 0;

    width: 20px;

    height: 20px;

    background-color: red;

    border-radius: 50%;

    transition: 1s ease-out;

}

<div class=submarine></div>