htmlanimation怎么多次触发,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{borderbox
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);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。