最近，接到项目需求，需要写大量的动画，那么怎么写呢？
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
我们知道CSS3的Animation有八个属性
其中，1是动画名字，2是动画的时间，3是动画的延时，4是动画的次数，5是动画是否逆向播放，6是动画是否在运行或者是暂停，7是动画之外的状态，8是动画的执行曲线。
例如：
div
{
animation: myfirst 5s 1s infinite;
-moz-animation: myfirst 5s 1s infinite; /* Firefox */
-webkit-animation: myfirst 5s 1s infinite; /* Safari 和 Chrome */
-o-animation: myfirst 5s 1s infinite; /* Opera */
}
那么，如何让我们的动画动起来呢？这就需要用到keframes了。
例如：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
通过animation和keyframes的配合就可以写出炫酷的动画效果了。
原文：http://www.cnblogs.com/yanxuan/p/6092602.html