标签：名称 tom tran function 上下 order ram span normal
通过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: 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也是。
标签：名称 tom tran function 上下 order ram span normal
原文地址：http://www.cnblogs.com/zlts/p/7843470.html
