transition transform translate 之间的区别

01.transform(转换) 和 translate

transform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样

translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

例如：

• transform：translate(0,100%)表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离
• transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px
• transform 有很多其它属性值
  translate3D定义 3D 转换
  scale 定义 2D 缩放转换
  rotate 定义 2D 旋转，在参数中规定角度
  skew 定义沿着 X 和 Y 轴的 2D 倾斜转换

02.transition(过渡)

• transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性

• 语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行
transition-property规定应用过渡的 CSS 属性的名称。
  transition-duration 定义过渡效果花费的时间。默认是 0。
  transition-timing-function 规定过渡效果的时间曲线。默认是"ease"。
  transition-delay 规定过渡效果何时开始。默认是 0。

transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。

例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s;