css3动画实现帧动画

#pic {
  height:90px;
  width:65;
  background-position: -40px -44px;
  background-image: url("https://static.runoob.com/images/mix/space-to-top.png");
  animation: .6s go steps(7) infinite;
}

 @keyframes go  {
   0% {
      background-position-x: -40px;
   }
   100% {
      background-position-x: -1040px;
   }
}

animation-timing-function 除了上面的几种常用方式之外（linear、ease等），还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。

阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

他有两个参数：

•  number_of_steps ：阶梯数（必须是一个正整数），他将动画的总时长按照阶梯数等距划分
•  direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

演示地址：https://c.runoob.com/codedemo/5643

实现动画