之前有个项目中需求是相应的动画后面都播放一下声音，就是想得到了应用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事件将在元素的每个样式属性值发生改变之后触发一次。
