前言
在CSS3中出现了可以创建动画的新属性，它比Flash制作出来的动画更加的方便，长话短说直接进入正题学习。
创建动画
创建动画需要用到@keyframes关键字，Name代表动画的名称。from代表0%的位置，to代表100%的位置，Percentage是百分比值，可以去多个百分比的值。
@keyframes Name {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
...
to {
Properties:Properties value;
}
}
也可以全部写成百分比的形式：
@keyframes Name {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
...
100% {
Properties:Properties value;
}
}
下面看一个实际的例子：
@-webkit-keyframes 'move' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
.box {
width: 150px;
height: 150px;
background:yellow;
/* 和动画起始属性要一致，否则会出现闪烁 */
margin-left:100px;
/* ---动画属性--- */
/*动画属性名，上面keyframes定义的动画名*/
-webkit-animation-name:'move';
/*动画持续时间*/
-webkit-animation-duration: 6s;
/*动画速度曲线*/
-webkit-animation-timing-function: ease-in-out;
/*动画延迟时间*/
-webkit-animation-delay: 1s;
/*定义循环资料，infinite为无限次*/
-webkit-animation-iteration-count: 4;
/*定义动画播放方式*/
-webkit-animation-direction: alternate;
}
html代码：
<body>
<div class="box"></div>
</body>
效果如下：
看完效果后我们分析代码：
在css中定义了@keyframes动画关键帧，名字为move，分别定义了，0%、40%、60%、100%位置时动画的状态。其中@-webkit-是兼容书写，下面有提到兼容性问题。
@-webkit-keyframes 'move' {
0% {
margin-left: 100px;
background: green;
}
40% {
margin-left: 150px;
background: orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
在动画物体box上定义基本属性。
.box {
width: 150px;
height: 150px;
background:yellow;
margin-left:100px;
}
再给动画物体box上绑定动画关键帧，添加动画相关属性即可。
.box {
/* ---动画属性--- */
-webkit-animation-name:'move';
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
}
动画相关属性介绍：
1. animation-name：
name的取值可以为none，代表无动画。
name的取值也可以为多个值，表示多个动画一起运动，用逗号隔开。
2. animation-duration：
动画所持续的时间长，单位为秒。
3. animation-timing-function：
贝塞尔函数运动曲线。
4. animation-delay：
动画延迟时间，单位为秒。
5. animation-iteration-count：
其默认值为“1”；infinite为无限次数循环。
6. animation-direction：
动画播放方式，有两个值。normal和alternate。
如果设置为normal时，动画的每次循环都是向前播放。
如果设置为alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。
当然也有简单的合并语法，和transition熟悉一样，可以根据上面的数字一一对应快速记忆。
animation:1[name] 2[duration] 3[timing-function]
4[delay] 5[iteration-count] 6[direction];
默认值：1[none] 2[0] 3[ease] 4[0] 5[1] 6[normal]
兼容性
兼容前缀主要是兼容早期各个游览器版本非标准的实现。
chrome和safari使用的是-webkit-前缀（之前chrome内核是webkit，现在chrome使用的内核是blink）。
ie10+使用的是-ms-前缀。
firefox使用的是-moz-前缀。
opera是用的是-0-前缀。
/* chrome safari */
@-webkit-keyframes myrotate{
0%{
-webkit-transform : rotate(0deg);
}
/* firefox */
@-moz-keyframes myrotate{
0%{
-moz-transform : rotate(0deg);
}
/* ie */
@-ms-keyframes myrotate{
0%{
-ms-transform : rotate(0deg);
}
/* opera */
@-o-keyframes myrotate{
0%{
-o-transform : rotate(0deg);
}
/* 支持w3c标准新版本游览器 */
@keyframes myrotate{
0%{
transform : rotate(0deg);
}
用CSS3 Animation配合canvas或者SVG在制作load动画，音乐播放转动非常方便。animation基本属性就介绍到这里，赶紧试试吧。
