一、CSS3动画创建三步走
CSS3 可以创建动画，分为以下三个步骤。
1、使用@keyframes规则创建动画
语法
@keyframes animationname {
keyframes-selector {
css-styles;}}
animationname 定义animation的名称，必需。
keyframes-selector 动画持续时间的百分比（0%-100%），必需。
CSS3 @keyframes 规则：
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
示例
@keyframes colam{
0%{
background:#fa0;}
25%{
background:#f60;}
50%{
background:#f40;}
100%{
background: #f10;}
}
@-webkit-keyframes colam{
/*Safari 与 Chrome */
0%{
background:#fa0;}
25%{
background:#f60;}
50%{
background:#f40;}
100%{
background: #f10;}
}
2、引用动画
使用简写属性把 animation 绑定到一个选择器上，如下：
animation：动画的名称 规定动画时长 播放次数
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:名称 - 动画时长 - 动画运动速度曲线 - 延迟间隔 - 播放次数 - 轮流反向播放 - 当动画不播放时，要应用到元素的样式 - 动画是否运行或已暂停
示例
.colorad{
width:100px;
height:100px;
animation:colam 5s infinite;
-moz-animation:colam 5s infinite; /* Firefox */
-webkit-animation:colam 5s infinite; /*Safari 与 Chrome */
-o-animation:colam 5s infinite; /* Opera */
}
3、页面调用
<div class="colorad"></div>
二、CSS3动画属性
要实现复杂多变的动画，必须了解CSS3动画的全部属性。
(1) animation-name: 规定了动画的名称。
语法
animation-name: keyframename|none;
(2) animation-duration: 规定动画播放完成时间，默认是 “0”。
语法
animation-duration: time; //如 5s(5秒) 或 5000ms（5000毫秒）
(3) animation-timing-function: 规定动画的速度曲线，默认是 “ease”。
语法
animation-timing-function: value;
值
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值，可能的值是从 0 到 1 的数值
例
animation-timing-function:cubic-bezier(0,0,0.58,1);}
(4) animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
语法
animation-fill-mode: none|forwards|backwards|both|initial|inherit
值
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
(5) animation-delay: 规定动画什么时候开始，默认是 “0”。
语法
animation-delay: time; //如 3s(3秒) 或 3000ms（3000毫秒）
time 可以为负值，示例：
animation-duration:5s;
animation-delay: -2s; //动画跳过 2 秒进入动画周期
**(6) animation-iteration-count:**规定动画被播放的次数，默认是 “1”。
语法
animation-iteration-count: value;
值
n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（循环）
(7) animation-direction: 规定动画是否循环交替反向播放动画，默认是 “normal”。
语法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
值
normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
注意：如果动画被设置为只播放一次，该属性将不起作用。
(8) animation-play-state: 规定动画是否正在运行或暂停，默认是 “running”。
语法
animation-play-state: paused|running;
值
paused 指定暂停动画
running 指定正在运行的动画
示例
colorad{
width:100%;
height:100px;
animation-name:colam;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-itration-count:1;
animation-direction:alternate;
animation-fill-mode:none;
animation-play-state:running;
}
简写属性
colorad{
width:100px;
height:100px;
animation:colam 5s linear 2s 1 alternate none running;
}