说完题外话，开始近期的主题动画设计。虽然css3动画基础知识学习过，但以前项目使用场景比较少，并没有太多的实践，加入新团队以来，做得几个项目与动画有关，尝试用css3来实现，过程中遇到了不少坑。
大学学过一个月画画，但没有这方面天赋，连简单卡通动画也画不好，于是在国外网站找来如下动画，利用它来做例子，并把这次用 css3 实现动画的原理分享给大家~
回到项目需求，要实现类似上图卡通人物跑步动画，分析结果如下：
1.跑步动画可以应用在不同的场景
要求人物的背景是透明的，图片保证高清，避免边缘杂边
2.跑步动画运动速度与动作成正比关系
人物跑步速度越快，身体动作越快；人物跑步速度为零时，身体动作马上停止在当前的状态
3.跑步动画效果流畅
不会出现卡顿现象
用ps打开该大师的 gif 图，在时间轴窗口中有 24 张不同的图片，通过一帧一帧的播放来实现跑步动画，很简单得说明做一个精细的动画需要多费点心思和劳动力啊，向大师表示敬礼~
项目组要求的动画跟上图人物大小差不多，一开始跟交互和视觉的同事讨论时，尝试使用 gif 来实现动画，使用7张图片轮播，间隔 0.2 秒可满足的动画效果，简单实现如下：
分析下gif动画
好处：实现简单、可维护性高、工作成本低
缺点：只适合简单的动画效果，不能动态控制动画
那么项目的硬性要求(控制动画的暂停、速度等)让我放弃了对gif实现跑步的想法~
放弃了 gif，而 swf 也不是我们的选择，canvas 实现也是可以的，这里不做介绍，本次主题是 css3 动画~
方式一：通过切换 7 张图片来实现
方式二：7 张图片合成 1 张，通过切换背景图片位置来实现
分析这2种方式
方式一：
实现起来会比较简单，但带来额外的 7 个请求数
7 张图片总大小为：50k
方式二：
需要设计雪碧图，并量取背景位置，请求数少
雪碧图大小为：37k
可以看出多张图片合成的雪碧图比 7 张图片还少 13k 外，还可以减少 7 个http请求，那么切换背景位置方式是比较好的，代码如下：
html:
css：
加快跑步速度：可以通过快速切换背景图片位置，animation-duration 可以控制动画运行的时间，那么减少动画的时间可以提升跑步的速度，通过在父级动态加载不同的功能 class 来运行不同的动画，从而改变跑步速度
详细内容请看代码，留意注释
css:
暂停跑步：使用 animation-play-state:paused 可以暂停正在进行的动画，并停留到当前的动作，那么当用户停止操作时，给父级加上功能 class 来停止动画
最后再通过 js 控制不同的跑步速度。
jquery:
最后界面：
animation 适合相对简单的动画，使用起来比较灵活，如支持切换不同的动画名、暂定动画等
animation-timing-function 的 step-start 属性等不完全支持 android 2.1~4.3 、ios 4.3 系统
ok~ 跑步动画到此结束，下期来个拆信封的动画，敬请期待~
作者：白树