css3里面新增属性 transition animation 等等，方便了前端小伙伴们做动画。不用再用js写长长的一大串，效果还不好！（这是对我等菜鸟来说，大神们怎么着都可以，唉！！）用代码来实现动画，其实就是不同时间，元素有不同的状态。
而这里面有个很好用的2d转换属性：transform，广大浏览器的支持也很不错。
属性transform 有很多的值，常用的就：
transform：translate(100px,200px);这个鬼是‘’偏移‘’，有点类似于定位的relative。该值呢2个参数，分别是xy两个方向上的值，只有一个参数时，默认y是0；
transform：rotate(30deg);这个鬼呢是“旋转”，参数就是旋转的度数。默认的旋转中心是元素的中心，通过transform-origin，可以改变这个中心。
transform：scale(1.2,1.5);这个鬼呢，就是“缩放”了，一般是hover的时候变大一下。2个参数，分别是x、y两个方向上的缩放比例。
只有一个参数时，默认y的值等于x的值。
还有skew（） matrix（）这俩货，官方分别叫“斜切” “混合”，有点“变形”的意思，用不好！！
扯淡结束，言归正传。
1、transition
一般俩值就够用，第一个是元素属性值变化的那个属性名 ，第二个是过渡时间啦。
如果只是改变了一个属性，比如width，transition:width 1s;这样写就ok了，但是有多个属性改变时，图省事，写个all吧，代表所有属性！！
2、animation
首先呢，用 @keyframe 来定义一个动画，动画名字随意就好。里面0% 50%就代表了不同的状态，根据自己需要还可以再细分（0% 25% 50% 75% 100%）.
0% 和 100%是一样的，开始和结束是一样的，中间随意。
写好动画后，就可以 ‘’调用‘’ 这个动画了。
animation:animation1 2s linear 2s 5;
一般最少2个值，动画名（你随意写的那个），完成整个动画一次的时间。
第三个值是动画完成过程（ease easeout linear 等），代表这先慢后快 、先快后慢、 线性 。
第三个值是，动画执行的延迟时间。
第四个值是动画执行次数，默认是执行一次。无数次是 infinite。自己随便写个十次八次也没问题。
还有别的值，自己查 http://www.w3school.com.cn/css3/css3_animation.asp 吧！！里面很详细。
处理兼容性的话一般这么写：
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
在@keyframe前面也加前缀就ok了，
eg： -moz-@keyframe
如果都写的话，好长啊！！
先到这里，有时间再补充！！！！！