CSS3 transition events

HTML

<div id='trigger'></div>
<p id='debug'></p>

CSS

body {
    background:black;
    color:white;
    padding:20px;
}
p {
    margin:10px 0;
}
div#trigger{
    width:50px;
    height:50px;
    background: white;
    border-radius:50px;
    box-shadow: 0 0 10px orange;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}
div.animate {
    margin-left:150px;
    box-shadow: 0 0 30px orange;
}

JavaScript

$(document).on('click',function(){
    $('#trigger').toggleClass('animate');
    $('#debug').html('started');
});

$('#trigger').on('webkitTransitionEnd moztransitionend transitionend oTransitionEnd', function (event) {
    console.log(event.originalEvent);
    //$('#debug').html('Animation ended');
    <!-- var html = $('#debug').html();
    html += '<div>'+event.originalEvent.propertyName+' '+ event.originalEvent.type +'<br/></div>';    
    $('#debug').html(html).width(); -->
});