CSS3过渡
概念
过渡可以在不使用flash或者js的前提下可以实现从一种样式转化为胡另一种样式的效果（IE9以下版本不支持）
语法：
transition：要过渡的属性 花费的时间 运动曲线 何时开始;
1、要过渡的属性
想要变化的css的属性，可以宽度，高度，背景颜色，内外边距等等，如果想要变化所有的属性，那么直接写一个all就可以了。
2、花费的时间
单位是秒，必须写单位：例如0.5s
3、运动曲线
默认的值是ease（可以省略）
4、何时开始（可以省略）
单位是秒（必须要写单位） 可以设置延迟出发的时间，默认是0s。
CSS3的2D转换
属性：transform
属性值：
translate （2D位移）
对盒子的X轴和Y轴进行位移
transform:translate(x,y)；
对盒子单独进行X轴的位移
transform:translateX(n)；
对盒子单独进行X轴的位移
transform:translateY(n)；
特点：
translate不会影响其他元素的位置（和相对定位类似）
translate的值如果是百分比，就代表移动的距离是相对于元素自身的宽高来决定的 translate(50%, 50%)
translate对行内元素没效果
利用translate设置盒子的水平垂直居中
rotate （2D旋转)
使用该属性值可以对元素进行选旋转设置，transform：rotate(度数)；
例如：transform:rotate(180deg); 代表元素顺时针旋转180度，当旋转的角度是负值的时候代表逆时针进行旋转
scale （2D缩放）
语法： transform:scale(x,y); 里面的x代表X轴缩放的倍数，y代表Y轴缩放的倍数
使用方法：
transform:scale(1,1); 代表缩放一倍，也就是没有变化
transform:scale(2,3); 代表宽放大2倍，高放大3倍
transform:scale(4); 代表宽和高都放大4倍
transform:scale(0.5,0.5); 代表宽和高都缩小0.5倍
scale缩放和width/height设置盒子大小的区别
直接用宽高进行设置时，上沿不动，只向下方来改变宽高，会对其他的盒子产生影响
scale进行缩放时，默认是以盒子中心点来进行缩放的，不会对其他盒子产生影响
属性：transform-origin 设置中心点
语法：transform-origin:x,y;
1、使用方位名词来设置中心点
2、利用像素值来设定元素的中心点
例
注意：
当单位为具体的像素值时，距离的相对起始位置在元素的左上角。
CSS3动画制作
动画序列
1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
2、在 @keyframes 中来规定css的样式，keyframes叫做关键帧
3、可以用百分比来规定变化发生的时间，或者用关键字from 和 to来规定，等同于0%~100%
动画的使用步骤：
1、定义动画
2、调用动画
3、定义动画的进行时间
多个状态的动画制作
动画常用属性
animation-timing-function属性：
steps()： 步长 ，就是分几步来完成动画，如果有了steps(),就不需要写 ease或者linear等运动曲线值
|
