王新阳

@keyframes 自定义名称 {
 0% {
  Properties:Properties value;
 }
 Percentage {
  Properties:Properties value;
 }
 100% {
  Properties:Properties value;
 }
}
Percentage的单位是%，不可省略
浏览器兼容性写法：
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@keyframes

例：
<style>
@-webkit-keyframes wobble{
 0% {
  margin-left: 100px;
  background: green;
 }
 40% {
  margin-left: 150px;
  background: orange;
 }
 60% {
  margin-left: 75px;
  background: blue;
 }
 100% {
  margin-left: 100px;
  background: red;
 }
}
.demo1{
 width: 50px;
 height: 50px;
 margin-left: 100px;
 background: blue;
 -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;/*定义动画方式*/
 /*-webkit-animation:wobble 10s ease-in-out 2s 10 alternate; 合到一行的写法*/
}
</style>
<div class="demo1"></div>

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 
也可以每个属性单独写：
1、animation-name: none 或 Keyframes创建的动画名（多个动画名用逗号分隔）
2、animation-duration: time 动画播放持续时长，多个用逗号分隔，单位s、ms
3、animation-timing-function 变化速率：linear、ease、ease-in、ease-out、ease-in-out
4、animation-delay 延时
5、animation-iteration-count 动画循环次数，默认为1，infinite无限次
6、animation-direction 动画播放方向，默认normal每次循环向前；alternate偶数次向前，奇数次反向播放
7、animation-play-state 动画播放状态，默认running，paused暂停。此属性基本不用

来源：http://www.w3cplus.com/content/css3-animation