过渡

CSS3 过渡（transition）是元素从一种样式逐渐改变为另一种的效果，语法为“transition：transition-property transition-duration transition-timing-function transition-delay;”,其中transition-property和 transition-duration是过渡的必须指定内容。

transition-property是过渡或动态模拟的CSS属性，如width、height、background-color属性等，一般为了方便都会使用all（指定所有元素支持transition-property属性的样式）。

transition-duration是完成过渡所需要的时间，定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）。

transition-timing-function是过渡动画函数，指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式。

transition-delay是过渡开始出现的延迟时间，取正值时元素过渡效果不会立即触发，当过了设置的时间值后才会被触发；取负值时过渡效果会从该时间点开始显示，之前的动作被截断；默认值为0，元素过渡效果立即执行。

2D转换

1、translate平移。translateX表示只设置X轴的位移，transform:translate（100px,0）可以简写为transform:translatex（100px）。translateY表示只设置Y轴的位移，transform:translate（0,100px）可以简写为transform:translateY（100px）。单独设置translateX和translateY时，写在前面的会被覆盖。

2、scale缩放。scale可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等。scaleX表示只设置X轴的缩放，transform:scale（2,1）可以简写为transform:scalex（2）。scaleY表示只设置Y轴的缩放，transform:scale（1,2）可以简写为transform:scaleY（2）。值为1时为其自身原来的大小。

3、skew倾斜。包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX表示只在X轴(水平方向)倾斜，skewY表示只在Y轴(垂直方向)倾斜。

4、rotate旋转。单位使用deg（度数）表示，取正值时元素相对原来中心顺时针旋转，取负值时逆时针旋转。rotateX表示沿着中心所在x轴旋转，会改变高度；rotateY表示沿着中心所在Y轴旋转，会改变宽度。