之前有個項目中需求是相應的動畫后面都播放一下聲音，就是想得到了應用webkitTransitionEnd后添加聲音。在pc上播放都是正常的但是在手機上測試的時候確實響了兩次聲音，后嘗試了好多方法進行修改但是終不得解決，最后由于項目緊張就用了最笨的方法頁面添加n個聲音依次播放。終不甘心所欲抽時間又查了下原因：
在CSS 3中，可以通過使用keyframe樣式屬性與animation樣式屬性實現animation動畫，使用transition樣式屬性實現transition動畫。
在WebKit引擎的瀏覽器（包括Chrome瀏覽器與Safari瀏覽器）中，存在與這兩種動畫功能相關的webkitAnimationEnd事件與webkitTransitionEnd事件，本文對這兩個事件進行詳細介紹。本文中不對CSS 3中的animation動畫功能以及transition動畫功能進行詳細介紹，如果想更多了解這方面的知識，可以參閱筆者所著《HTML 5與CSS 3權威指南》。
在WebKit引擎的瀏覽器中，當CSS 3的animation動畫執行結束時，觸發webkitAnimationEnd事件,當CSS 3的transition動畫執行結束時，觸發webkitTransitionEnd事件?？梢酝ㄟ^如下所示的代碼捕捉這兩個事件。
//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false);
//捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false);
webkitAnimationEnd事件##
在WebKit引擎的瀏覽器中，當CSS 3的animation動畫執行結束時，觸發webkitAnimationEnd事件。在CSS 3中，使用如下所示的樣式代碼定義animation動畫。
.element{
-webkit-animation: anime 0.5s ease-in;
}
@-webkit-keyframes anime {
0% {
-webkit-transform: translate(0,0);
opacity: 0.1;
}
50% {
-webkit-transform: translate(100px,0);
opacity: 0.5;
}
100% {
-webkit-transform: translate(0,0);
opacity: 1;
}
}
上面這段代碼執行功能為在0.5秒內將元素向右移動100像素后將其返回。我們可以在這個動畫結束時觸發的webkitAnimationEnd事件中執行一些代碼，例如顯示動畫已執行結束，以及動畫的執行次數結果如：
動畫執行次數：1
webkitAnimationEnd事件觸發次數：1
webkitTransitionEnd事件##
在WebKit引擎的瀏覽器中，當CSS 3的transition動畫執行結束時，觸發webkitTransitionEnd事件。在CSS 3中，使用如下所示的樣式代碼定義transition動畫。
.element{ -webkit-transition: all 0.25s ease-in; }
.element.on{ -webkit-transform: translate(100px,0); }
上面這段代碼執行功能同樣為在0.5秒內將元素向右移動100像素后將其返回。我們可以在這個動畫結束時觸發的webkitTransitionEnd事件中執行一些代碼，例如顯示動畫已執行結束，以及動畫的執行次數結果如：
動畫執行次數：1
webkitTransitionEnd事件觸發次數：2
從執行結果中我們可以看出,在每個動畫的執行過程中,webkitTransitionEnd事件的觸發次數比webkitAnimationEnd事件的觸發次數多一次,這是因為webkitAnimationEnd事件只在元素向右移動,然后向左返回之后觸發一次,而webkitTransitionEnd事件將在元素向右移動之后觸發一次,在元素向左返回之后再觸發一次。
接下來，我們為元素多指定一個opacity(透明度）樣式屬性，代碼如下所示：
.element.on{
-webkit-transform: translate(100px,0);
opacity: 0.5;
}
然后將元素的transition樣式屬性值指定為all,然后觀察執行一次動畫時webkitTransitionEnd事件的觸發次數結果如：
動畫執行次數：1
transition動畫執行結束：4
從執行結果中我們可以看出，如果多使用一個樣式屬性，在每個動畫執行的過程中webkitTransitionEnd事件的觸發次數將多增加兩次。也就是說webkitTransitionEnd事件將在元素的每個樣式屬性值發生改變之后觸發一次。
