通过CSS3，我们可以创建动画，而不必再使用JavaScript，此篇文章分享@keyframes规则，其实掌握了就会觉得它是如此的简单。这里讲一下transform与@keyframes动画的区别：transform只执行一次，而@keyframes动画是循环的。
我们先来看一个小例子：
<h4>Hello World</h4>
h4{ ???animation: color 2s infinite alternate; /*名字 时间 无限循环 轮流反向播放*/}@keyframes color{ ???from{ ???????color:#f00; ???} ???to{ ???????color: #0f0; ???}}我们来分析一下上面的代码：
首先写好要动画的元素，然后@keyframes来创建动画，后面跟着动画名字，from里面放的是动画开始（0%）的样式，to里面放的是动画结束（100%）的样式，然后把动画绑定到选择器，这里有几个选项下面依次来介绍：
- animation-name：规定 @keyframes 动画的名称
- animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0
- animation-timing-function：规定动画的速度曲线。默认是 "ease"
- animation-delay：规定动画何时开始。默认是 0
- animation-iteration-count：规定动画被播放的次数。默认是 1
- animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"
- animation-play-state：规定动画是否正在运行或暂停。默认是 "running"
- animation-fill-mode：规定对象动画时间之外的状态
而我上面写的 animation: color 2s infinite alternate; 是简写形式：
h4{ ???animation: color 2s infinite alternate;}/* 相当于 */h4{ ???animation-name: color; ???animation-duration: 2s; ???animation-iteration-count: infinite; ???animation-direction: alternate;}下面我们来看一个箭头上下移动的例子（结合transform）：
<span class="box"><i class="arrow"></i></span>
.arrow{ ???display: inline-block; ???width:20px; ???height:20px; ???border-left:2px #f60 solid; ???border-bottom:2px #f60 solid; ???transform: rotate(-45deg);}.box{ ???display: inline-block; ???animation: triangle 2s infinite; /* 名字，时长，循环执行的次数 */}@keyframes triangle{ ???0%{ ???????transform: translate(0, 0); ???} ???50%{ ???????transform: translate(0, 10px); ???} ???100%{ ???????transform: translate(0, 0); ???}}还要注意一点transform是css3的属性，前面要加前缀，诸如-o-、-moz-等，@keyframes也是。
CSS3 @keyframes 规则
原文地址：http://www.cnblogs.com/zlts/p/7843470.html