css3动画连续执行两个怎么做 5
1个回答
展开全部
如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>执行两个CSS3动画</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<style>
*{ 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);
}
}
</style>
</head>
<body>
<div class="div dh">纯CSS</div>
<div class="div div1">js控制</div>
</body>
<script type="text/javascript">
$(function(){
$('.div1').addClass('dh1');
var t = parseFloat( $('.dh1').css('animation-duration') );
setTimeout(function(){
$('.div1').removeClass('dh1').addClass('dh2');
},t*1000);
});
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
