逐帧动画

动画是一帧帧的跳动，去除帧两头的过渡成果，
将animation动画animation-timing-function设置为steps函数
steps(<integer>[, [ start | end ] ]?)
第一个参数指定每两个关键帧之间分几步实现
第二个参数为可选参数start | end，默认值为end
step-start在变动过程中，是以下一帧的显示成果来填充距离动画
step-end在变动过程中，是以上一帧的显示成果来填充距离动画

• 图片解决
  （将图片拼接成单列雪碧图）

• css

  .app {
  width: 2rem; // 显示动画盒子的宽度，确保为一帧画面的宽度
  height: 2rem; // 显示动画盒子的高度，确保为一帧画面的高度
  background: url("./imgs/image.png") no-repeat;
  background-position: 0 0;
  background-size: 2rem; // 这里须要保障背景图片的宽度与盒子宽度统一
  animation: myAnimation 5s steps(124) infinite; // steps(124) 124为雪碧图的动画帧数
  }
  @keyframes myAnimation {
  to {
    background-position: 0 -248rem; // 雪碧图动画完结地位
  }
  }

• 参考animation-timing-function