CSS 实现一个奔跑动画

实现一个奔跑效果，你需要以下几个资源

• 一个雪碧图，包含了奔跑动作的关键帧，一般12个左右
• 一段除CSS 代码把上边的雪碧图通过动画依次展示出来

最终效果：

http://codepen.io/idiotWu/pen/IDqlw

需要在动画中添加操作的，就需要使用 CSS 实现，否则可以直接用 Gif

实现原理：

一、拿到雪碧图，一定要告诉设计小伙伴，这个雪碧图是自循环的。

奔跑的雪碧图

二、用 keyframes 定义动画的规则

$spriteWidth: 140px;
$spriteHeight:140px;
$steps: 12;
@keyframs run{
  0% { background-position: 0 0;}
  100% {background-position: -($spriteWidth * 12) 0;}
}

#target {
  width: $spriteWidth;
  height: $spriteHeight;
  background: url("../images/sprite.png") 0 0 no-repeat;
  animation: run 0.6s step($steps) infinite;
}

三、里面有个新东西需要解释 step()

首先参考 CSS3 timing-function: steps() 详解

steps([, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。