前方出现一头牛！

没错，这是一个 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！

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50726.shtml