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