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

    }

    html,body {

      width: %;

      height: %;

    }

    div.test {

      width: 100px;

      height: 100px;

      background: #feedad;

      border-radius: 10px;

      transition: all 2s ease-in-out;

    }

    div.test:hover {

      width: 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(, 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: ;

    }

    html,body {

      width: %;

      height: %;

    }

    div.test {

      width: 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(, ) skewX(30deg) translate(%, %) 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: ;

    }

    html,body {

      width: %;

      height: %;

    }

    div.test {

      width: 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;

        width: 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主要用来做复杂的动画。

且transition从hover延伸而来，animation从flash延伸而来。