首先了解一下animation的所有属性 W3school是这样定义的：
然后我们用@keyframes 规则来创建两个我们要执行的动画
接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：
这样效果就完成了。
【PS】这里并没有写兼容，说一下浏览器兼容。
如果可以用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:0margin:0font-size:14pxbox-sizing:border-box }
.div{ margin: 50px autowidth: 240pxheight: 240pxtext-align: centerline-height: 240pxbackground: #34343Acolor: #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>
@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg)}
50%{transform:scale(2) rotateX(180deg)}
100%{transform:scale(1) rotateX(360deg)}
}
中间用空格隔开就行了, 下面是完整的例子
<!DOCTYPE HTML><html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div{
margin:120px auto
width:60px
height:30px
background-color:#999999
transform-origin:center top
animation:bg1icon8_move 3s infinite
}
@keyframes bg1icon8_move{
0%{transform:scale(3) rotateX(0deg)}
50%{transform:scale(2) rotateX(180deg)}
100%{transform:scale(1) rotateX(360deg)}
}
</style>
<div></div>
</body>
</html>
