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