CSS自定义属性又称为CSS的变量或者原生变量。其和CSS处理器里的变量还是略有不同，但这篇文章我们要聊的并不是这个东东，咱们想聊聊CSS自定义属性怎么制作动画。

在继续之前，咱们都知道现在制作Web动画一般是通过CSS的Animation或者Web Animation API来完成（也就是JavaScript制作动画）。但有了CSS自定义属性之后，配合简单的几行JavaScript代码，也可以实现一些动画效果。那么CSS自定义属性是如何制作动画呢？

如果你感兴趣的，请继续...

CSS自定义属性

CSS自定义属性最早称之为CSS变量，更官方一点的称谓是CSS自定义属性级联变量。

官方对CSS变量是这样描述的：

变量，是标识符和可以用任何常规值替代值之间的关联，使用var()函数表示法：var(- example-variable)返回--example-variable的值 。

对CSS自定义属性是这样描述的：

自定义属性，这是表单的特殊属性 --* 这里*表示变量名称。这些用于定义给定变量的值：--example-variable：20px; 是一个CSS声明，使用自定义 --*属性将CSS变量--example-variable的值设置为20px。

CSS自定义属性的使用方法

为了能更好的理解后面的内容，先简单的回忆一下CSS自定义属性的使用方法。

可以像下面那样先声明一个变量：

:root {
    --primary-color: green;
}

然后在需要使用的地方通过var()函数来调用：

body {
    background-color: var(--primary-color);
}

这个时候body的背景颜色是green。如果你想让body背景颜色变成gray时，你只需要修改--primary-color。看上去是不是像CSS处理器中变量的使用方法。

是不是很简单，如果你觉得就这点内容不够深入，可以阅读早前译的一篇文