互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。小妖发出的内容，都是自己实测过的，有问题请留言。
前方出现一头牛！
没错，这是一个 gif，但这个 gif 也是从小妖的 Demo 页上录下来的，闻到了原滋原味的 CSS3 的味道了吗？Demo 见：
http://xngeer.frostbelt.cn/itemcss/frame-animation.html
那如何用 CSS3 实现这个帧动画呢？
准备素材
头儿经常说前端应该能做出炫酷的东西，但巧媳妇难为无米之炊，没有好的设计和素材，前端有时候还是只能徒唤奈何呀。本Demo素材来源于网络
怎么让它动起来呢？
有同学已经想到了，把这张图片设为背景，不断修改 background-position 就可以了！对，其实就是这个道理
那有没有更优雅，而且不涉及 JS 的实现方式呢？
我们今天说的 CSS3 帧动画就是用来解决这个问题，上代码：
定义一个简单的 keyframes , 修改 background-position-x，从 0 到 -590（图片宽度）
animation: ox1 1s steps(6, start) 0ms infinite normal backwards
分别说一下各属性的涵义：
animation-name: ox1; /* 使用 keyframes ox1 */
animation-duration: 1s; /* 动画持续时间 1s */
animation-timing-function: steps(6, start); /* 动画函数，分6步执行，每一帧显示帧结束时的状态 */
animation-delay: 0ms; /* 延迟多长时间后开始执行动画 */
animation-iteration-count: infinite; /* 动画执行无限次 */
animation-direction: normal; /* 是否应该轮流反向播放动画 normal/alternate */
animation-fill-mode: backwards; /* 会在向元素应用动画样式时迅速应用动画的初始帧 */
不必计算每一帧具体的偏移，没有 JS！
这里提到了 animation，帧动画是 animation 的一种使用，想了解更多 animation 相关属性请查看以下 Demo 的源码：
http://xngeer.frostbelt.cn/itemcss/animation.html
有了 CSS3 这把利剑，相信你会走得更远~