css中的transform，transition，translate的关系

transform 旋转（transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。其中的位移的函数名就叫translate，所以说，translate是transform的一部分。）
transition 平滑过渡（是 过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。）

transition语法

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

案例

transition: height 2s ease .5s;

transition: all 2s ease .5s;

或者拆开来写，

transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;

transition: width 2s ease .5s
// 等同于
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;

transition-property: height, width;
transition-duration: 2s, 3s;
// 其他属性可以省略

transition: height 2s, width 3s;

下面的是错误的，逗号前必须是一个完整的过渡描述。

transition: height, width 2s ease .5s;

transform语法

transform: [转换函数];

函数	作用	参数介绍	参数默认值
translate(x, y)	元素位移	元素偏移的x轴和y轴距离，可为负	(0px, 0px)
scale(x, y)	元素缩放	元素x轴和y轴缩放的倍数，小于1为缩小，大于1位放大，小于0效果和为0时相等	(1, 1)
rotate(angle)	元素旋转	旋转的角度，单位deg，顺时针旋转	(0deg)

我们想移动当前元素的话就可以这样(往上移动 10 像素，往右移动 10 像素)

transform: translate(-10px, 10px);

指定多个转换效果

transform: translate(10px, 10px) rotate(10deg);

tips:转换函数之间可没有逗号。

transition + transform

下面这种写法可以给transform指定一个过渡，

transition: transform 2s ease .5s;

小结：

• 如果想用更复杂的动画效果，可以使用animation属性。或者用animate.css。

• 如果使用transition监听基本属性，例如height或width等，其值在发生改变时就会对文档流产生影响。

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    width: 120px;
    height: 120px;
}

• 使用transform则不会出现文档流错位。因为transform只会影响当前元素的状态，达到类似position: relative;的效果。

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    transform: scale(1.2, 1.2);
}