transition和transform

1，transition:过渡（是一个简写的属性，用于设置四个过渡的属性）；

transition-property:设置过渡效果的css属性的名称；

默认值是all；

transition-duration:设置完成过渡效果需要多少时间单位用秒来表示；

默认值是0s，这个属性一定要写，因为0s没有时间，就没有过渡的效果；

transition-function:设置过渡效果的速度曲线；

默认值是ease（慢速开始，然后变快，然后慢速结束的过渡效果）；

ease-in(慢速开始，然后变快，然后慢速结束的过渡效果);

ease-out(规定以慢速结束的过渡效果);

ease-in-out(以慢速开始和结束的过渡效果);

linear(以相同速度开始至结束的过渡效果);

cubic-bezier(n,n,n,n);定义自己的值，可以设置任意值；正负值皆可；

transition-delay:设置过渡的延迟；

transition的简写方式：

transition：transition-property transition-duration transition-function transition-delay；

2，transform：变形；（只对block元素生效）

transform属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被位移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）；

translate位移：

translateX：元素在x轴上偏移；

translateY：元素在Y轴上偏移；

translate（x，y）：元素在x轴和y轴同时偏移，如果只设置一个值的时候，那么只有x轴生效；

rotate旋转：

rotateX:元素绕着x轴旋转；

rotateY:元素绕着Y轴旋转；

rotateZ:元素绕着Z轴旋转；

rotate：元素绕着Z轴旋转；

scale：缩放：

scaleX  设置元素在X轴方向缩放比例

scaleY  设置元素在Y轴方向缩放比例

scale（x，y）  设置元素在x轴和y轴方向的缩放比例，只设置一个值的时候，x轴和y轴都生效；

skew：倾斜；

skewX 元素绕x轴倾斜；

skewY 元素绕着Y轴倾斜；

skew（x，y）元素绕着x轴和Y轴倾斜，不过这里的x轴和Y轴是和平时相反的，常用于平行四边形；

transform-origin：设置元素变化的中心点（原点）；

可以设置两个值：transform-origin：x，y；

x可以支持的属性值：px 百分比 left center right；（可以设置负值）；

y可以支持的属性值：px 百分比 top center bottom；（可以设置负值）；