css3动画衔接播放

1.css中用逗号分隔两个动画名称和设置。

animation-name:bounceIn,flash;
animation-duration: 1s,1s;
animation-timing-function: ease,linear;
animation-delay: 0s,1s;
animation-iteration-count: 1,infinite;

这是忽略兼容性的写法，其中animation-delay需要计算动画延迟时间。

2.监听动画结束。

$(".ib").get(0).addEventListener("webkitAnimationEnd", function() {
    $(".ib").removeClass("rotateIn");
    $(".ib").addClass("flash");
    $(".ib").addClass("infinite");
})