css3 自定义动画（2）位置的移动

<style>
/*涉及到位置的必须给元素进行相对或绝对定位*/
@-webkit-keyframes move{
  0%{top:0px;left:0px;}
  25%{top:0px;left:300px;}
  50%{top:300px;left:300px;}
  75%{top:300px;left:0px;}
  100%{top:0px;left:0px;}

} 
   .box{
       width:100px;height:100px;background:red;position:absolute;-webkit-animation:5s move ease-in-out infinite alternate;
   }
   /*infinite 循环播放 alternate倒序播放*/

</style>