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，我写了也是没多大意义。就在这里统一对比一下这几个属性，碰到类似问题的朋友们看到后容易分辨后就好了。

最近在搞一个和前端程序员相关的公号，除了技术分享之外，也增加了对于职业发展、生活记录之类的文章，欢迎大家关注，一起聊天、吐槽，一起努力工作，认真生活！