transform、translate、transition、animation区别

1. transform：描述了元素的静态样式，本身不会呈现动画效果，主要应用于元素的 2D 或者 3D转换，可以将元素 旋转、缩放、移动、倾斜等,使用的时候注意兼容性就好了；

2. translate：主要控制目标元素的移动（2D、3D）。目前为止还可以说是一个 CSS 变换函数，赋值给transform使用，而不是一个完全可以单独使用的css属性，因为目前只有火狐浏览器支持它的css属性写法；

3. transition：CSS过渡属性，为一个元素在不同状态切换的时候定义不同的过渡效果。

4. animation：CSS 动画，将元素的样式配置转换到另一个CSS配置。包括动画所使用的样式规则，以及用于指定动画开始、结束以及中间多个节点的关键帧；

  transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
   animation可以设定循环次数。
 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
    animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果