CSS3实现过渡效果 (transition)

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的

动画。

transition
功能：实现元素不同状态之间的平滑过渡。
此前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间

数值型的属性才可以设置过渡。
width,height,color,font-size

transition-property 过渡属性：发生变化时，想要有过渡效果的属性设置全属性all。
transition-duration 完成时间：单位是s/ms。
transition-timing-function 运动曲线：

linear: 表示匀速过渡；
ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；
ease-in: 表示过渡的速度先慢，后越来越快，直至结束；
ease-out: 表示过渡的速度先快，后越来越慢，直至结束；
ease-in-out: 表示过渡的速度在开始和结束时都很慢；
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。
transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。

transition: all 1000ms linear 500ms;
-o-transition: all 1000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: all 1000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: all 1000ms linear 500ms; /*兼容webkit内核*/
1
2
3
4
基于webkit内核的私有属性是：-webkit-transition;
基于gecko内核的私有属性是：-moz-transition;
基于prestot内核的私有属性是：-o-transition;
2D位移
格式：
transform:translate(水平偏移量，垂直偏移量)
参数：

正值：向右和向下

负值：反方向。

百分比：盒子本身的宽高*百分比

2D缩放
格式：
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值：大于1表示放大，小于1缩小。

倾斜
格式：
transform:skew(水平倾斜角度，垂直倾斜角度)
单位：deg 角度
正值：顺时针，负值：逆时针。

旋转
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。
transform 可以书写多个2D转换，中间用空格隔开。

当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。