最简化模型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>