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的设置为动画结束的状态。

推荐阅读更多精彩内容