图解 CSS 属性单位和动画属性

在做动画的时候，常常会被一些单位搞蒙圈，比如 deg 是啥、turn 是啥，今天我用一张图帮大家总结了 CSS 中常用的单位。无论在写动画还是 CSS 样式的时候，离不开 CSS 中的单位，灵活使用 CSS 的单位会起到事半功倍的效果。我把 CSS 中的属性单位分成四类：

1、关键字，比如 top、center、left 等；

2、长度，比如 px；

3、百分比，比如 100%；

4、角度：比如 1 turn 表示一圈，30deg 表示 30度；

不同的单位使用场景会不一样，比如使用 transform 做旋转动画的时候需要用到角度的单位 deg、turn 等。我画了一张图，帮大家记忆：

不是说所有的 CSS 属性都能够做动画，我给它分了 3 类：

1、运动类的，比如 padding、margin、width、height；

2、美容类的，比如 background-color、color、font-size；

3、整形类的 transform，比如放大 scale()，旋转函数 roate()；

以上是 CSS 中做动画的基础知识，但是非常重要。前面我们所做的动画都是建立在这些属性的基础之上。

大家加油！

---

推荐阅读：

四步搞定小菊花 Loading 动画