html animation怎么多次触发,css3动画连续执行两个怎么做

如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。

html>

执行两个CSS3动画

*{ padding:0;margin:0;font-size:14px;box-sizing:border-box; }

.div{ margin: 50px auto;width: 240px;height: 240px;text-align: center;line-height: 240px;background: #34343A;color: #FFF; }

.dh{ animation: dh 4s linear both; }

@keyframes dh{

0%{

border-radius: 0px;transform: rotateZ(0deg);

}

50%{

border-radius: 50%;transform: rotateZ(0deg);

}

100%{

border-radius: 10%;

transform: rotateZ(360deg);

}

}

.dh1{ animation: dh1 2s linear both; }

@keyframes dh1{

0%{

border-radius: 0px; transform: rotateZ(0deg);

}

100%{

border-radius: 50%; transform: rotateZ(0deg);

}

}

.dh2{ animation: dh2 2s linear both; }

@keyframes dh2{

0%{

border-radius: 50%; transform: rotateZ(0deg);

}

100%{

border-radius: 10%; transform: rotateZ(360deg);

}

}

纯CSS

js控制

$(function(){

$('.div1').addClass('dh1');

var t = parseFloat( $('.dh1').css('animation-duration') );

setTimeout(function(){

$('.div1').removeClass('dh1').addClass('dh2');

},t*1000);

});