transform translate transition 傻傻分不清楚

刚接触 css 的伙伴们，有时候会被 transform translate transition 给绕晕，由于它们长得是这么像，这篇用较短的篇幅给你们介绍，让你们更好的区分它们。

transform

字面意思是：使…变形

属性的做用是对给定的元素旋转，缩放，平移或扭曲，经过修改元素的坐标空间实现。

使用方式：transform: rotate | scale | skew | translate |matrix;

因此当咱们须要对元素作这些操做时，就须要使用 transform 属性。

translate

大伙在 transform 的值中应该发现了 translate ， translate 的意思就是平移，将元素按照坐标轴上下左右移动

使用方式： transform: translate(200px,50px); 元素较原先的位置，往右移动 200px，往下移动 50px

注意， translate 属性须要在 transform 中才能使用， translate 其实也是属于修改元素的空间位置。

transition

字面翻译是过渡的意思，这个属性可让元素的变化以动画的形式呈现，好比说太高度从100变到200 height:100px -> 200px ，没有其余属性的状况下，这个就是一瞬间的事，为了让页面交互友好些，但愿高度的变化能有个过渡效果，那么 transition 就派上用场了。

官方介绍： transition 提供了一种在更改CSS属性时控制动画速度的方法，其可让属性变化成为一个持续一段时间的过程。

transition 用来作动画效果很是的方便，但缺点也很明显，动画不支持循环，复杂的动画就难为它了，因此适用于一些简单的过渡效果。

它有四个值：

• transition-property：指定属性用于生成过渡动画，如宽、高、颜色等等，包括上面介绍的 transform ，只要这个属性的值是能够变化就行，且起始状态都是明确的。

• transition-duration：动画执行时间

• transition-timing-function：缓动函数， 内置了这些 ease | linear | ease-in | ease-out | ease-in-out ，也能够上 easings.net/ 挑选本身喜欢的效果

• transition-delay：延迟执行的时间

三个一块儿使用

咱们看下面这段 css，同时用上了咱们刚介绍的三个属性，这段css的效果是，当鼠标移上元素的时候，元素在 200毫米内，匀速的往x轴和y轴放心移动了 100 像素。

.translate:hover {
    transition: transform .2s ease;
    transform: translate(100px,100px);
}
复制代码

效果以下

总结

transform 是用来实现元素坐标空间的变化， translate 用来移动元素， transition 给元素的变化加上动画效果。