遇到的第一个问题： 同一个DOM节点如何监听和控制多个animationend事件？

答案异常简单，就是我们万能的className，为了预防每次动画执行完毕都会调用animationend事件，可以使用 removeClass。
下面是一段简单的代码案例，转至别人
div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.animation1 {
animation: upin 2s ease;
-webkit-animation: upin 2s ease;
}
.animation2 {
animation:beat .93s infinite ease ;
-webkit-animation:beat .93s infinite ease ;
}
@keyframes upin{
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@-webkit-keyframes upin{
0% {
opacity: 0;
-webkit-transform: translateY(-100%)
}
100% {
opacity: 1;
-webkit-transform: translateY(0)
}
}
@keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
}
@-webkit-keyframes beat {
0% {-webkit-transform: scale(1)}
15% {-webkit-transform: scale(1.2)}
30% {-webkit-transform: scale(1)}
55% {-webkit-transform: scale(1.1)}
100% {-webkit-transform: scale(1)}
}

注意：
1. 只要为DOM节点绑定了animationend事件，不清楚动画的情况下，只要动画完成就会执行
（animationend：“ ”）这种清除方式无效
jQuery.unbind 可以清除，但是会永久清除这个事件，无法再次使用。效果相当于 用 one 去绑定事件
2. 在animationend 事件之外加判断条件无效果，动画结束后，仍然会执行绑定的事件。加条件判断必须在 事件内部。