CSS3动画中的steps(),制作人物行走动画

steps()是css3动画属性animation-timing-function的其中一个值，语法为：
steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
于是制作人物行走的动画有以下两种写法：

    
 
 
 
     .animate {
  width: 88.83333333333333px;
  height: 54px;
  margin: 10px auto;
  overflow: hidden;
     }
     .animate img{
  width: 533px;
  height: 54px;
     }

     
     .animate01 img{
  -webkit-animation: animate01 1s steps(1)  infinite;
     }
     @-webkit-keyframes animate01 {
  0% {
      transform: translateX(0);
  }
  16.7% {
      transform: translateX(-90px);
  }
  33.4% {
      transform: translateX(-180px);
  }
  50.1% {
      transform: translateX(-270px);
  }
  67.8% {
      transform: translateX(-360px);
  }
  84.5% {
      transform: translateX(-450px);
  }
  100% {
      transform: translateX(-533px);
  }
     }
   
     .animate02 img{
  -webkit-animation: animate02 1s steps(6, end)  infinite;
     }

     @-webkit-keyframes animate02 {
  0% {
      transform: translateX(0);
  }

  100% {
      transform: translateX(-533px);
  }
     }