在前面已经学习过了css3中的transition（css3动画属性）、transform（css3变形属性）。今天来学习另外一个css3动画属性animation，这个是不是跟我们jQuery中的animate很相似呢？
我们也知道transition可以做到从一个状态变化到另一种状态的变化。代码类似于：transition:color 0.2s easy-in-out .1s;
那么为什么还需要这个animation属性呢？原因可能是transition太局限了，通过animation可以通过百分比来进行几个状态切换。从0%到20%到40%。到60%到100%。是的，这就是这个animation的功能所在了。
CSS3动画
使用CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画和JavaScript。
CSS3关键帧规则
要创建CSS3的动画，你必须了解@关键帧规则（Keyframes）。
@关键帧的规则是创建动画。@关键帧规则内指定CSS风格和动画将逐步从目前的风格改变为新的样式。
浏览器支持
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}
animation的属性有下面这么几种内容：
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
你可以在这里查看更多的案例：http://www.w3cplus.com/content/css3-animation
更多内容请参考W3c
