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负责动画效果