transform 、transition 和 animation 的区别

transform

是静态属性，设置了就会立马生效，比如给容器设置 transform: scale(0.8) , 渲染的时候会直接使容器变小
具体用法 https://www.runoob.com/cssref/css3-pr-transform.html

transition

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

设置时不会立马生效，当容器某个属性变化时，才会触发该过渡效果
比如设置 transition: all 0.3 ease-in 0，该容器的宽度从 100px 到 200px，然后会触发该过渡效果，不会立马从 100px 跳到 200px，属于 animation 的简版
具体用法 https://www.runoob.com/cssref/css3-pr-transition.html

animation

这个很好区分，相信大家用的也比较多，不解释，看文档 https://www.runoob.com/cssref/css3-pr-animation.html