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

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