【WEB前端系列之CSS】CSS3动画之Animation

前言

动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading

学习CSS3中Animation之前先来看一个动画特效（可以自己运行看下实际效果）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .spinner{

             width:60px;

             height: 60px;

             background-color: #67CF22;

             margin: 100px auto;

             animation: rotateplane 1.2s infinite ease-in-out;

             -webkit-animation: rotateplane 1.2s infinite ease-in-out;

         }

         @-webkit-keyframes rotateplane {

             0%{-webkit-transform: perspective(120px)}

             50%{-webkit-transform: perspective(120px) rotateY(180deg)}

             100%{-webkit-transform: perspective(120px) rotateY(180deg)}

         }

         @keyframes rotateplane {

             0%{

                 transform: perspective(120px) rotateX(0deg) rotateY(0deg);

                 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)}

             50%{

                 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

                 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)}

             100%{

                 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

                 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}

         }

     </style>

 </head>

 <body>

 <div class="spinner">

 </div>

 </body>

 </html>

在学习Animation之前必须先了解“Keyframes”,我们把它称为“关键帧”。
Animation使用Keyframes这个属性来控制动作延续时间及变换速率。
Keyframes具有自己的语法规则，它的命名由“@Keyframes”开头，后面紧跟这个动画的名称加上一对“{}”，括号中就是一些不同时间段样式规则，
对于一个“@Keyframes”中的样式规则是由多个百分比构成的，如“0%”到“100%”之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有
动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动、改变元素原色、位置、大小、形状等。我们可以使用“from” "to"来代表动画从哪开始，到哪结束，、
也就是说这个“from”相当于“0%”而“to”相当于“100%”,注意：“0%”中的%不能省略，如果没有的话，这个keyframes是无效的不起任何作用，因为Keyframes的单位只接受百分比值。
“Keyframes”可以指定任何顺序排列来决定Animation动画变化的关键位置：
语法：

 keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';

  keyframes-blocks: [ keyframe-selectors block ]* ;

  keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

也就是：

 @keyframes IDENT {

      from {

        Properties:Properties value;

      }

      Percentage {

        Properties:Properties value;

      }

      to {

        Properties:Properties value;

      }

    }

或者全部写成百分比的形式：

   @keyframes IDENT {

       0% {

          Properties:Properties value;

       }

       Percentage {

          Properties:Properties value;

       }

       100% {

          Properties:Properties value;

       }

     }

其中IDENT是一个动画名称，可以自己定义，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样的百分比，Properties为css的属性名，比如说left,background等，value就是相对应的属性的属性值。值得一提的是，我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。

以下是W3C官网的示例：

  @-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;

      }

   }

定义了一个叫“wobble”的动画，他的动画是从0%开始到100%时结束，从中还经历了一个40%和60%两个过程，上面代码具体意思是：wobble动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间著作权归作者所有。
CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

如下示例展示了如何给一个元素调用animation属性：

 .code1 {

      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;/*定义动画方式*/

   }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了code1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

Animation常用属性：

animation-name;
animation-duration;
animation-timing-function;
animation-delay;
animation-iteration-count;
animation-direction;
animation-play-state

一、animation-name

语法：animation-name:none | IDENT[,none | IDENT]*;
说明：animation-name:是用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，换句话说此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。

二、animation-durtion

语法： animation-duration: <time>[,<time>]*
说明：animation-duration是用来指定元素播放动画所持续的时间长，取值:<time>为数值，单位为s （秒.）其默认值为“0”。

三、animation-timing-function

语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
说明：animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。具有ease;ease-in;ease-in-out;linear;cubic-bezier几种方式

四、animation-delay

语法：  animation-delay: <time>[,<time>]*
说明：animation-delay:是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0。

五、animation-iteration-count

语法：  animation-iteration-count:infinite | <number> [, infinite | <number>]*
说明：animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

六、animation-direction

语法：animation-direction: normal | alternate [, normal | alternate]*
说明：animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

七、animation-play-state

语法： animation-play-state:running | paused [, running | paused]*
取值：animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。

animation元素简写：

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>] ]*