#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover
/* 随便设置宽高值，测试 */
width:200px
height:200px
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0)
-moz-transform:translate3d(0,0,0)
transform:translate3d(0,0,0)
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */
-webkit-animation:play 3s linear infinite
-moz-animation:play 3s linear infinite
animation:play 3s linear infinite
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg)
/*
垂直翻转
-webkit-transform:rotateX(0deg)
顺时针旋转
-webkit-transform:rotate(0deg)
逆时针旋转
-webkit-transform:rotate(0deg)
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg)
/* 垂直翻转
-webkit-transform:rotateX(360deg)
顺时针旋转
-webkit-transform:rotate(360deg)
逆时针旋转
-webkit-transform:rotate(-360deg)
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg)
/*
-moz-transform:rotateX(0deg)
-moz-transform:rotate(0deg)
-moz-transform:rotate(0deg)
*/
}
100% {
-moz-transform:rotateY(360deg)
/*
-moz-transform:rotateX(360deg)
-moz-transform:rotate(360deg)
-moz-transform:rotate(-360deg)
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg)
/*
transform:rotateX(0deg)
transform:rotate(0deg)
transform:rotate(0deg)
*/
}
100% {
transform:rotateY(360deg)
/*
transform:rotateX(360deg)
transform:rotate(360deg)
transform:rotate(-360deg)
*/
}
} <!-- html 布局代码 -->
<div id="gavinPlay"></div>
你的代码里面只有位置移动的top,left。没有写旋转的代码。在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。
相关示例如下：
<style>
.ani{animation:box 1s linear 0s infinitewidth:100pxheight:100pxbackground:greenborder-radius:50%}
@keyframes box{0% {transform:rotate(0deg)translate(0,0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0)}75%{transform:rotate(270deg)}100% {transform:rotate(360deg)translate(0,0)}}
</style>
<div class="ani"></div>
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
这个只用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的动画时间，你可以根据情况作出适当的时间调整。
