CSS3 Animation动画

前言

---

在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代码：

效果如下：

动画效果

看完效果后我们分析代码：
在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基本属性就介绍到这里，赶紧试试吧。