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

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,048评论 0 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,291评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,144评论 0 11
  • 作者:Aaron原文地址:http://www.cnblogs.com/aaronjs/p/4642015.htm...
    IT程序狮阅读 917评论 0 4
  • transition过度 指定进行过度的css属性 默认值:all none: 不指定过渡的css属性 all: ...
    angelwgh阅读 122评论 0 0