判断一个元素的两个动画都结束

判断css3动画结束，有个事件：animationend,可以监听此事件，做出自己的业务逻辑。

比如页面一加载，动画就要执行一次；动画执行完毕后，hover上，动画也要再执行。
可给元素单独加个类名来控制动画的执行。伪代码：

       var x = document.getElementById("demo");
        x.className='box anibox';
        // Chrome, Safari 和 Opera 代码
        x.addEventListener("webkitAnimationEnd", function () {      
                x.className='box';
        });
        x.onmouseenter=function(){
            x.className='box anibox';
        }

如果一个元素上有两个动画，那么每个动画执行完毕都会触发animationend事件，只需要来个全局标记即可。伪代码：

 var x = document.getElementById("demo");
        console.log(x.className);
        x.className='box anibox';
        var aa = 0;
        x.addEventListener("webkitAnimationEnd", function () {
            aa += 1;
            if (aa === 2) {
                aa = 0;
                x.className='box';
            }
        });
        x.onmouseenter=function(){
            x.className='box anibox';
        }