CSS——transform、transition、animation，如何简单的区分并记住它们

想起当时刚接触css动画的时候，这几个属性总是搞混，每次使用的时候都心虚，都要去查一波，感觉算一个小坑，后来自己总结了一个方法，彻底区分这些属性，给刚入坑的朋友分享一下，也许有用。

1.transform和transition

只要牢记这两个单词的含义，这两个并不难区分。

transform：变化

transition：过渡（动画）

2.transition和animation

transition和animation的区别也很好理解。

transition是补间动画，只有开始和结束两种状态，中间自动补充

animation是帧动画，可以用关键帧来设计每一帧的动画，用来做比较复杂的动画

---

关于这三个属性的使用，个人认为W3C解释的非常清楚，而且都有例子，只要能区分它们，简单使用起来并不难，下面就附上教程的链接吧。

transform：https://www.w3school.com.cn/cssref/pr_transform.asp

transition：https://www.w3school.com.cn/cssref/pr_transition.asp

animation：https://www.w3school.com.cn/cssref/pr_animation.asp