• transition
• transform
• translate

这个三个CSS属性长得也太像了吧，刚接触的时候傻傻分不清，去翻了一下MDN和W3的文档，简单总结了一下它们是用来做什么的。

transition

参考文档: css-transitions

transition是一个元素在不同状态之间切换的时候定义不同的过渡效果，是以下几个属性的简写。

• transition-property: none或all或CSS属性名(一个或多个)，默认值是all
• transition-duration: 表示transition效果需要指定多少秒或毫秒才能完成，默认值是0s
• transition-timing-function: 过渡函数，指定transition效果的转速曲线，默认值是 ease
• transition-delay: 延迟时间，定义transition效果开始的时候，默认值是0s

<single-transition>#
where
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
where
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

例子：

// transition.html
// div的背景色为红色，:hover鼠标放上去后变成绿色
// transition实现渐变效果
<style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 3s;
  }
  div:hover {
    background-color: green;
  }
</style>
<div></div>

如果同时要改变颜色和大小

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    transition: background-color, width 4s;
  }

  div:hover {
    width: 300px;
    height: 200px;
    background-color: green;
  }
</style>
<div></div>

"transition: background-color, width 4s" 这里指定是颜色和宽度两个属性，那么高度的变化就不会有动画效果了，如果要包括宽度，可能用"transition: 4s" 或者“transition: background-color, width, height 4s”，因为<transition-property>默认是all。以下两种写法效果一样：

div {
    transition-property: background-color, width, height;
    transition-duration: 1s, 2s, 3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}
//等同于
div {
　transition: background-color, width, height 1s, 2s, 3s
｝

使用例子

// 把div沿xy轴向右向下移动
div{
  transform: translate(120px, 50%);
}

transform

参考文档: css-transforms

通过修改CSS视觉格式化模型的坐标空间来旋转，缩放，倾斜或平移元素（只能转换由盒模型定位的元素）。

transform的属性可以是none或一个或多个变换函数<transform-function>

• none: 不使用任何变换。
• <transform-function>: 一个或多个变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。以下是一些变换函数：
  • matrix()
  • translate() | translateX() | translateY()
  • scale() | scaleX() | scaleY()
  • rotate()
  • perspective()
  • skew()
  • ...

translate

translate是transform的一个属性，可独立使用。参考 css-transform/individual-transfroms

Value: none | <length-percentage> [<length-percentage><length>?]?

translate可以接受1-3个值，只有一个或两个值的时候，元素沿着XY轴移动（只有一个值时第二个值默认为0）。三个值的时候，元素沿着XYZ轴作3D变换。

例子

// 把div向右向下移动
// 结合transition可以看到移动效果
<style>
  div {
    height: 150px;
    width: 150px;
    background-color: lightgreen;
    transition: transform 1s;
  }

  div:hover {
    background-color: lightgreen;
    transform: translate(120px, 50%);
  }
</style>

<div></div>

为了更好地了解这几个属性，以下例子是在MDN的一个例子的基础上稍作修改：

[CSS]从立方体学习CSS属性 - transform