CSS3：
一、transition: <property> <duration> <animation type> <delay>
eg：
.div{width:10px;}
.div:hover{transition:width:100px 2s ease-in-out 1s;}//1s后div原来width:10px变为100px,所花时间为2s，速度为先加速再减速。
<property> 当元素其中一个属性改变时执行transition效果
1、none(没有属性改变)；当其值为none时，transition马上停止执行。
2、all（所有属性改变）默认值；当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
3、indent（元素属性名）；indent是指指定元素的某一个属性值:width,height,background,opacity...
<duration>持续时间，
单位为s（秒），默认为0
<animation type>:运动形式
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)
4、ease-out：（减速）
5、ease-in-out：（加速然后减速）
6、cubic-bezier：（该值允许你去自定义一个时间曲线）
<delay> 延迟多久开始执行
单位为s（秒），默认为0
例子：transition：all 1s ease 1s （如果是点击事件）
代表：点击1秒后，所有属性在1s内完成运动，而且是缓冲的效果
注意：
1 默认值： transition：all 0 ease 0，此时不会产生任何效果，因为运动时长为0
2 改变多个属性，之间用逗号隔开
div{
transition-property: width, height, transform, background
transition-duration: 1s, 1s, 1s, 1s
}
二、
tranform的属性包括：
1、none 表示不进行变换；
2、rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数。
需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。//也就是说要看要基于哪一点旋转。
3、skew 扭曲 transform:skew(30deg,30deg) skew(相对x轴倾斜,相对y轴倾斜)
4、scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。
5、translate 移动 transform:translate(50px, 50px);
6、perspective 镜头到元素平面的距离，所有元素都是放置在z=0的平面上，比如perspective(300px)表示，镜头距离元素表面的位置是300px;//该属性要放在动作属性之前