SOURCE

var test = document.getElementById('test');
test.addEventListener("transitionend", myFunction);
var number = 1;
function myFunction(e){
    e = e || event;
    console.log('propertyName:' + e.propertyName + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement);
    document.getElementById('number').innerText = number++;
}

var test1 = document.getElementById('test1');
test1.addEventListener("transitionend", myFunction1);
var number1 = 1;
function myFunction1(e){
    document.getElementById('number1').innerText = number1++;
}

var test2 = document.getElementById('test2');
test2.addEventListener("transitionend", myFunction2);
var number2 = 1;
function myFunction2(e){
    document.getElementById('number2').innerText = number2++;
}

var test3 = document.getElementById('test3');
test3.addEventListener("transitionend", myFunction3);
var number3 = 1;
function myFunction3(e){
    document.getElementById('number3').innerText = number3++;
}

<div id="test">执行次数<span id="number">0</span></div>

<h5>过渡属性有几个就会触发几次</h5>
<div id="test1">执行次数<span id="number1">0</span></div>


<h5>如果过渡属性是复合属性，有几个复合属性，就会触发几次</h5>
<div id="test2">执行次数<span id="number2">0</span></div>

<h5>如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数</h5>
<div id="test3">执行次数<span id="number3">0</span></div>

#test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition: width 1.5s 0.5s;
}
#test:hover{width: 200px;}

#test1{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition: width .5s 0.5s, background-color 1.5s 0.5s;
}
#test1:hover{width: 200px;background-color: powderblue}

#test2{
    height: 100px;
    width: 100px;
    background-color: pink;
    border: 1px solid #000;
    transition: border-width .5s 0.5s;
}
#test2:hover{border-width: 5px}

#test3{
    height: 100px;
    width: 100px;
    background-color: pink;
    border: 1px solid black;
    transition:all 1s;
    -webkit-transition: all 1s;
}    
#test3:hover{
    border-width: 10px;
    width: 200px;
}