1.transition介绍
transition是指元素的过渡，指元素从一个状态过渡到另外一个状态。这里的状态要和形态区分开，状态比如说hover,focus,active等都算是元素的状态，所以往往我们会将transition定义在初始状态中，只在最终状态中定义它需要改变的属性，就可以看到过渡效果。
transition的相关属性：
transition-property:需要实现过渡效果的属性名称（比如background-color,width,height,text-shadow等，也可以使用all来应用到所有可过渡的属性）
transition-duration:定义过渡效果持续的时长(用秒进行定义，可以使用.3s、2s或1.5s来定义)
transition-timing-function:定义过渡期间的速度变化(例如ease、linear、ease-in、ease-out、或者cubic-bezier)
transition-delay:可选，用于定义过渡开始前的延迟时间。相反，如果将值设置为负数，可以让过渡效果立即开始，但过度进行到一半会提前结束，同样采用秒来定义。
简写写法：
transition：all 1s ease 0.5s.
当简写时，第一个出现的时间相关的值会被赋予给transition-duration,第二个与时间相关的值则会被赋予transition-delay上，所以以上的顺序也可以变化，不一定严格按照这个顺序来写。
同时实现多个过渡属性：
如果我们存在这样的需求，想要同时实现宽，颜色等属性的过渡，但持续时间不一致，也是可以实现的，实现方式如下：
.inner{
transition-property:width,color,text-shadow;
transition-duration:2s,3s,5s;
}属性顺序和时间顺序是一一对应的关系。
2.transform
transform指变形，可以对元素的形态进行改变，比如缩放、旋转、移动、斜切等。
它包含以下几种变换形式：
scale:用来缩放元素(放大或缩小，使用数值来表示，比如1.5表示放大至原来的1.5倍，0.5表示缩小至原来的一半)
translate:在屏幕上移动元素（上下左右方向），因为应用translate属性不会改变元素在文档中占得流的大小，所以移动元素不会使旁边的元素错位。我们也可以很轻松的使用translate元素来实现我们的元素居中定位。
举个例子：
.inner{
position:absolute;
width:200px;
background-color:#999;
top:50%;
left:50%;
transform:translate(-50%,-50%); //这里的数值是相对于元素的长和宽乘以50%，而不是根元素
}rotate:按照一定角度旋转元素(单位为deg)
skew:延X轴和Y轴对元素进行斜切(单位是deg)
matrix:允许用户以像素精度来控制变形效果，看这个解释感觉很抽象，其实就有点像我们在三维空间，通过坐标来定位图形一样，不过这个是一个二维图形，不是三维。
transform-origin:默认情况下，我们的变形原点是在元素中心，元素X轴的50%和Y轴的50%,我们可以通过这个属性来修改变形原点。(可以使用百分比%或者px为单位，使用百分比计算长度是以元素长宽为基数计算)比如：transform-origin:0px 0px;
分享一个可随意变形的傻瓜式的矩形变形工具：http://www.useragentman.com/matrix/
transform3d：前面介绍的属性都是属于2D的属性，而这个属性允许元素进行3D变换，使用这个属性可以在X轴、Y轴、Z轴（与屏幕垂直的方向上）移动元素。举个例子：
.flipper:hover{
transform:rotate(180deg) translated3d(0,0,-120opx)
}在这个例子中，我们可以发现X和Y轴都没有变化，Z轴视觉上会感觉向垂直屏幕的方向上向里推动了120PX的感觉，效果如图：
transition和transform的对比：
transition我们可以看到是对元素本身属性的状态改变，进而达到一个过渡变化的过程，可能一些结果看起来和transform带来的效果是一样的。
transform是对整个元素的改变，主要是操作整个元素在文档流中的形状变化。
transition可以设置变化时间和延迟时间，而transform单独不提供变化时间和变化函数，如果需要实现的话，需要结合transition来使用。
比如：
.flipper-object {
position: absolute;
width: 100%;
height: 100%;
transition: transform 3s linear 5s;
transform-style: preserve-3d;
}
.flipper-object :hover {
transform: translate3d(0, 0, -120px);
}为了让效果更明显一点，我把时间设置的很长，就可以看到鼠标移到元素上后，元素在5s以后，开始向Z轴负值方向(即屏幕向里的方向)移动，3s后移动完成并停留在这个状态,变化后结果和上面的图是一样的。
3.animation
动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数。
CSS3中广泛使用的是动画关键帧技术，它的应用首先需要先声明，然后再引用。
使用方法：
使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
与transition的区别：
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。
支持的属性如下：
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 |
支持性：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 使用的是weblit内核，需要前缀 -webkit-
举个例子：
.animation-property{
animation-name:warning;
animation-duration:1.5s;
animation-timing-function:ease-out;
animation-delay:.5s;
animation-iteration-count:infinite;
animation-direction:alternate | normal | reverse | alternatereverse;
animation-paly-state:running | pause;
animation-fill-mode:none | forwards | backwards |both;
}