一、今日学习内容1.CSS3过渡 transition：要过渡的属性 花费的时间 运动曲线 何时开始;
2.CSS3的2D转换 translate （2D位移）
对盒子的X轴和Y轴进行位移 transform:translate(x,y)；对盒子单独进行X轴的位移 transform:translateX(n)；
特点：translate对行内元素没效果 translate的值如果是百分比，就代表移动的距离是相对于元素自身的宽高来决定的 translate(50%, 50%)
translate不会影响其他元素的位置（和相对定位类似）
rotate （2D旋转) transform:rotate(180deg); 代表元素顺时针旋转180度，当旋转的角度是负值的时候代表逆时针进行旋转
scale （2D缩放） transform:scale(2,3); 代表宽放大2倍，高放大3倍
scale进行缩放时，默认是以盒子中心点来进行缩放的，不会对 用宽高进行设置时，上沿不动，只向下方来改变宽高，会对其他的盒子产生影响
属性：transform-origin 设置中心点
transform-origin:x,y; 当单位为具体的像素值时，距离的相对起始位置在元素的左上角
3.CSS3动画制作
1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
2、在 @keyframes 中来规定css的样式，keyframes叫做关键帧
3、可以用百分比来规定变化发生的时间，或者用关键字from 和 to来规定，等同于0%~100%
多个状态的动画制作
animation-timing-function属性
steps()： 步长 ，就是分几步来完成动画，如果有了steps(),就不需要写 ease或者linear等运动曲线值
|
