这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
<!DOCTYPE html><html>
<head>
<title>HTML5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
img{width: 200px}
.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}
.animate1{
-webkit-animation: move1 2s infinite
}
.animate2{
-webkit-animation: move2 1s infinite
}
@-webkit-keyframes move1{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(1.5)
}
}
@-webkit-keyframes move2{
0%{
-webkit-transform: rotateZ(0deg) scale(1.5)
-webkit-transform:
}
100%{
-webkit-transform: rotateZ(360deg) scale(1.5)
}
}
</style>
</head>
<body>
<div class="div1 animate2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.querySelector(".div1")
oDiv.className="div1 animate1"
setTimeout(function(){
oDiv.className="div1 animate2"
},2000)
}
</script>
</body>
</html>
原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
-webkit-transform-origin: center bottomtransform-origin: center bottom
transform-origin：[ <percentage>| <length>| left | center① | right
] [ <percentage>| <length>| top | center② | bottom
]?
默认值：50% 50%，效果等同于center
center
适用于：所有块级元素及某些内联元素
继承性：无
取值：
<percentage>：
用百分比指定坐标值。可以为负值。
<length>：
用长度值指定坐标值。可以为负值。
left：
指定原点的横坐标为left
center①：
指定原点的横坐标为center
right：
指定原点的横坐标为right
top：
指定原点的纵坐标为top
center②：
指定原点的纵坐标为center
bottom：
指定原点的纵坐标为bottom
说明：
设置或检索对象以某个原点进行转换。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
对应的脚本特性为transformOrigin。
