CSS 中 transform、animation、transition、translate的区别

在前端页面的开发过程当中，常常会碰到这么几个 CSS 属性容易搞混：transform、translate、animation还有transition。下面就针对这几个 CSS 属性作一个对比，辨别这几个属性的区别以及了解他们的使用场景。

简单归纳一下：

1. transform：主要应用于元素的 2D 或者 3D转换，能够将元素 旋转、缩放、移动、倾斜等,使用的时候注意兼容性就行了；
2. translate：主要控制目标元素的移动（2D、3D）。目前为止还能够说是一个 CSS 变换函数，赋值给transform使用，而不是一个彻底能够单独使用的css属性，由于目前只有火狐浏览器支持它的css属性写法；
3. animation：CSS 动画，将元素的样式配置转换到另外一个CSS配置。包括动画所使用的样式规则，以及用于指定动画开始、结束以及中间多个节点的关键帧；
4. transition：CSS过渡属性，为一个元素在不一样状态切换的时候定义不一样的过渡效果。

原本想写一下demo的，可是想了想，仍是算了~你们在W3school，MDN，菜鸟教程均可以看到相关的小demo，我写了也是没多大意义。就在这里统一对比一下这几个属性，碰到相似问题的朋友们看到后容易分辨后就行了。