最简化模型2——css3分阶段动画效果，经过实测之转动的div

@keyframes mymove{

0%{top: 0;left: 0;transform:rotate(50deg);}

10%{top: 100px;left: 50px;transform:rotate(80deg);}

20%{top: 300px;left: 40px;transform:rotate(-50deg);}

30%{top: 400px;left: 200px;transform:rotate(150deg);}

40%{top: 700px;left: 300px;transform:rotate(350deg);}

100%{top: 200px;left: 50px;transform:rotate(160deg);}

}

.circle{width: 200px;height: 150px;background: olive;margin: 0 auto;position: relative;}

.circle{

-webkit-animation: mymove 5s ;

-o-animation: mymove 5s ;

animation: mymove 5s ;

}

注意：要运动起来很多时候要给动画元素一个相对定位属性才能动起来，如果不加position:relative;属性，则left和top等位移属性值将没有效果

<div class="circle"></div>