css3之transition、transform、animation比较

　　css3动画多少都有些了解，但是对于transition、transform、animation这几个属性一直是比较模糊的，所以啊，这里做一个总结，也希望大家都可以对此有一个更好地理解。

　其实，最简单的理解，我么可以这么认为：transition、transform、animation分别为过渡、变换、动画。 他们三者的作用实际上是不一样的，比如transition过渡一般都是配合hover使用的，对于transform呢，如果不配合，就是简单的拉伸、缩放、偏移等静态的变换，但是呢，如果配合transition，然后再使用hover这些触发的方式，就会好得多啦。最后，animation是最为强大的，这个属性可以做更多事情，下面就具体的说一说吧。

一、transition

　　它的作用很简单，就是平滑的改变CSS值， 包括点击事件、焦点事件、hover等，只要值改变了，就是平滑的动画。其属性如下所示：

transition-property 过渡的性质，比如background过渡。
transition-duration 过渡持续的时间，比如2s
transition-delay 延迟过渡时间，比如1s
transition-timing-function 指定过渡类型，有ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier

　　一般，我们是将这些属性全部用transition写在一起的，而不是分开写，并且由于兼容性的问题，我们需要添加各个浏览器的前缀才可以。

　　另外，对于transition-property、transition-duration、transition-delay都不难理解，但是，transition-timing-function应该如何去理解呢？恩，张鑫旭大神是这么理解的：

其实呢，理一理，也还好。首先cubic-bezier这个基本上就不用鸟了，99%的情况都用不到这个东西，所以，难得清闲，直接pass掉。linear很好记，线性嘛。至于ease-in | ease-out | ease-in-out，就是指缓动效果啦，说白了就是指开始时候慢慢动呢还是结束的时候慢慢动。那么in和out那个先慢慢动呢？啊，我们可以联想记忆，很好记的。我们都知道OOXX吧，ease-in中的in就表示进入，进入的时候显然一开始都是慢的，等瞄准就绪后才能快速冲刺进入，于是ease-in表示先慢后快；ease-out其out表示出来，出来肯定是先快后慢的，因为出来时临近洞口速度肯定要降下来，免得跑出来乱了节奏，于是ease-out表示先快后慢；最后，很好理解的，ease-in-out表示一进一出，也就是先慢后快再慢。

　　我们可以通过点击这个例子看效果。

　　下面就是一个简单的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>left</title>
  <style>
    * {
      margin: 0;
    }
    html,body {
       100%;
      height: 100%;
    }
    div.test {
       100px;
      height: 100px;
      background: #feedad;
      border-radius: 10px;
      transition: all 2s ease-in-out;
    }
    div.test:hover {
       200px;
      height: 200px;
      background: pink;
      border-radius: 30px;
      margin-left: 300px;
      transform: rotate(720deg);
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

从上面的代码来看，我们是在没有hover的类中，即本身class上填写的 transition,通过all，就可以让所有的属性发生变化，并且属性不需要只在一个地方写，比如 div.test 中没有margin-left，但是我们在div.hover中使用了 margin-left，这样也是可以起作用的。

最终的效果如下：

　　　　、

二、 transform

　　transform从英文上来看，就知道是变换的意思，即常见的拉伸、压缩、旋转、偏移等：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

　　我们在对一个块级元素进行居中的时候，也常常会用到 transform: tranlate(50%, 50%) 属性。但是呢？如果我们只是简单地添加到某个元素上，是没有动态效果的，而只是静态的拉伸等。

　　但是，transform属性要是和transition一起，那么就会行云流水了~ （另外，也是可以配置animation的~）

　　代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>left</title>
  <style>
    * {
      margin: 0;
    }
    html,body {
       100%;
      height: 100%;
    }
    div.test {
       100px;
      height: 100px;
      background: #feedad;
      border-radius: 10px;
      transition: transform 2s ease-in-out;
    }
    div.test:hover {
      /* transform: scale(2); */
      /* transform: skewX(90deg); */
      /* transform: translate(50%, 50%); */
      transform: scale(2, 2) skewX(30deg) translate(50%, 50%) rotate(720deg);
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

注意：这里的transform不能分开写，否则肯定是会覆盖的，所以比较好的做法就是写在一起拉，然后在div.test中写 transition: transform 2s ease-in-out; 就会出现炫酷的效果啦！

三、animation

　　animation即动画，当然要比过渡、变换更为强大了。缺点也是现在不能很好地在各个浏览器上收到支持。

　这个animation的作用其实主要是为了替代flash的。 要创建css3动画，我们就不得不使用@keyframes 规则，使用该规则创建动画，它规定了一个css样式和动画将逐步从目前的样式更新为新的样式。

　　使用了@keyframes之后，我们就必须把它绑定到animation选择器，否则动画是没有任何效果的，这个animation选择器至少需要两个属性：

动画的名称，即由@keyframes规定的名称
动画的总时长，即动画完成需要的时间

举例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>left</title>
  <style>
    * {
      margin: 0;
    }
    html,body {
       100%;
      height: 100%;
    }
    div.test {
       100px;
      height: 100px;
      background: #feedad;
      border-radius: 10px;
      -webkit-animation: myAnimation;
      -o-animation: myAnimation;
      animation: myAnimation 2s;
    }
    @keyframes myAnimation {
      from {
        background: blue;
      }
      to {
        background: yellow;
         300px;
        height: 300px;
        margin-left: 500px;
        transform: skew(30deg) rotate(50deg);
      }
    }
  </style>
</head>
<body>
  <div class="test"></div>
</body>
</html>

这样，是不是很简单啊，只要使用@keyframes定义，然后在animation中使用就可以了。

四、三者比较

transitoin主要是用来做属性的过渡的。
transform主要来做变换。（一般要和transition或者animation配合使用）
animation主要用来做复杂的动画。