css3运动后留下轨迹尾巴_css3 监听webkitAnimationEnd运动结束 后执行什么

*{

margin: 0;

padding: 0;

}

#box{

position: relative;

/*overflow: hidden;*/

margin: 0 auto;

width: 1000px;

height: 500px;

border: 1px solid black;

transform: scaleX(0) scaleY(0);

}

#box #inner{

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

width: 400px;

height: 400px;

opacity: 0;

transform: rotate(0deg) scale(0.5);

font-size: 100px;

line-height: 400px;

text-align: center;

color: white;

background: red;

border-radius:50% ;

}

.innerShow{

-webkit-animation: fadeIn 0.5s forwards;

}

@-webkit-keyframes scaleIn{

0%{

transform:scaleX(0) scaleY(0);

}

25%{

transform: scaleX(0) scaleY(0.5);

}

50%{

transform: scaleX(1) scaleY(0.5);

}

100%{

transform: scaleX(1) scaleY(1);

}

}

@-webkit-keyframes fadeIn{

from{opacity: 0;}

to{opacity: 1;}

}

@-webkit-keyframes rotateScale{

from{

transform:rotate(0deg) scale(0.5);

}

to{

transform:rotate(360deg) scale(1);

}

}

HTML5

var oBtn = document.getElementById("btn");

var oBox = document.getElementById("box");

var oInner = document.getElementById('inner');

oBtn.onclick = function(){

oBox.style.webkitAnimation = "scaleIn 1s ease forwards";

}

oBox.addEventListener("webkitAnimationEnd",function(){

oInner.className = "innerShow";

},false);

oInner.addEventListener("webkitAnimationEnd",function(){

oInner.style.opacity =1;

oInner.style.webkitAnimation = "rotateScale 1s forwards";

},false);