css3学习笔记

最近做的项目中，涉及到了许多动画效果的实现，今天主要谈谈css3 Animation的使用。

CSS3属性中有关于制作动画的三个属性：transform, transition, animation。

• transform
  transform主要是负责元素的变形。主要包括：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。rotate定义了元素旋转的角度，如transform:rotate(30deg)表示顺时针旋转30度。移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。scale的用法和translate相似，可以控制x轴方向缩放、Y轴方向缩放以及xy轴同时缩放。
  具体用法参考：http://www.w3cplus.com/content/css3-transform

• transition
  transition允许css的属性值在一段时间内平滑过渡。transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。
  具体使用方法参考：http://www.w3cplus.com/content/css3-transition

• animation
  animation是本次重点学习的内容，animation和canvas的最大区别就是，animation的动画是必须用在已存在的dom节点上。
  animation有以下属性：

  1. animation-name @keyframes动画的名称；
  2. animation-duration 动画完成的时间；
  3. animation-timing-function 动画的速度曲线（linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n));
  4. animation-delay 动画何时开始；
  5. animation-iteration-count 动画被播放的次数,默认是1(n,infinite)
  6. animation-play-state 动画处于播放或则暂停状态(paused,running);

  学习animation，最重要的概念就是@keyframes，对于一个@keyframes中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，这相当于对于一个完整动画中关键帧的定义。

  比如，实现一个人走路的动画:

      .slowWalk {  
       animation-name: person-slow;
       animation-duration: 950ms;
       animation-iteration-count: infinite;
       animation-timing-function: steps(1, start);

      @keyframes person-slow {
        0% {
           background-position: -0px -291px;
        }
        25% {
           background-position: -602px -0px;
        }
        50% {
           background-position: -302px -291px;
        }
        75% {
           background-position: -151px -291px;
        }
        100% {
           background-position: -0px -291px;
         }  
      }

CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间段变化的效果。

目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀。