CSS3 动画
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
@keyframes 定义动画关键帧:
@keyframes animateName {
0% {
状态
}
100% {
状态
}
}
@keyframes animateName {
from {
状态
}
to {
状态
}
}
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
from和to等同于0%和100%；0%表示动画的开始；100%表示动画的结束；
@keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes；
当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
- 规定动画的名称
- 规定动画的时长（默认为0）
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@keyframes tabList {
0% {
width: 50px;
height: 50px;
}
50% {
width: 100px;
height: 100px;
} 100% {
width: 150px;
height: 150px;
}
} @-webkit-keyframes tabList{
0% {
width: 50px;
height: 50px;
}
50% {
width: 100px;
height: 100px;
}
100% {
width: 150px;
height: 150px;
}
}
.tablist{
animation: tabList 3s;
-webkit-animation: tabList 3s;
background: red;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="tablist"></div>
</body>
</html>
当然对于状态的定义不局限于开始和结束两个时间点，我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点，也可以写入10%，20%，30%...根据需求挑时间点动画。
CSS3 动画属性：
当我们使用@keyframes定义好了一个动画，它并不会执行产生任何效果，直到我们通过animation属性将动画应用到相应元素上。
对于 CSS3 animation 属性其完整的语法如下：
animation: name duration timing-function delay iteration-count direction;
- name是使用@keyframes定义好的关键帧名称
- duration从字面意思可知是指定动画持续时间
- timing-function 指定动画以何种方式播放，具体指的是从元素的一个状态过渡到另一个状态所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
- delay指定动画何时开始，默认为0；
- iteration-count 指定动画重复次数，可以指定一个数字，也可以使用'infinite'表示一直播放。默认为1.
- direction指定动画是否反向播放或者交替着播放，可用的值有normal, reverse, alternate, alternate-reverse
另外还有一个属性非常有用，一般在js中控制其属性。animation-play-state：paused/running；具体参考：http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state
其中name和duration 是必需的，如果不指定duration默认为0，也就是动画持续0秒，所以就无法看到动画效果。
以上的例子.tablist使用@keyframes定义好的动画。
参考：
http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html