然后在需要使用的地方通过var()函数来调用：
这个时候body的背景颜色是green。如果你想让body背景颜色变成gray时，你只需要修改---color。看上去是不是像CSS处理器中变量的使用方法。
是不是很简单，如果你觉得就这点内容不够深入，可以阅读早前译的一篇文章《深入学习CSS自定义属性》。这里就不再深入，把篇幅留给后面的内容。
CSS制作动画
CSS制作动画已经不是什么新课题了，大家在平常的业务中或许已经使用过了。主要是通过CSS的@和来完成。
比如@去年在第三次CSS开发才大会上分享的胡子抖动的动画。
上面这个小胡子是纯CSS代码绘制的哟，而且@有一个特别有意思的项目，就是使用CSS绘制很多小Icon，这里特别推荐一下，感兴趣的猛击这里查看。
回到我们今天的话题上来，动画通过@声明了和两个动画，然后在伪元素::和::after调用这两个动画。也就是你上面看到的效果。
CSS自定义属性制作动画
这里开始才是我们今天的关键。假设在上面的示例基础上，我把@和干掉。然后声明三个变量：
在调用的时候，可能通过var()来调用。比如说定位胡子的位置left：
这样其实我们的left值是0.1并不是我们想要的，那么很简单，可以借助calc()函数来做一下处理：
这个时候left的值就是100px。
那问题来了，我们怎么让小胡子动起来呢？这个时候需要借助来完成。我们可以通过()方法重置在:root{}中声明的变量，比如：
通过事件，改变了--mouse-x的值。这里需要特别注意了，我们给--mouse-x传了一个默认值(xPos - ww) / 25+"deg"。那么回到我们的示例中来：
使用类似的方法，添加代码：
这个时候你在屏幕中移动鼠标，能看到小胡子左右能移动，而且胡子也在上下抖动：
你也可以点击这里浏览全屏的动画效果。
是不是很简单，配合一定的事件，通过()方法改变对应的变量值。那么在实际中运用类似原理的地方有很多，比如说下面的两个示例：
移动鼠标改变图片的边框大小和模糊度：
移动鼠标改变图片的旋转角度值：
基于这样的思路，你也能很轻松的实现不同的动画效果，如果在移动端上，你也可以配合重力感应或者陀螺仪等功能，实现一些更有创意的动效。
总结
CSS新增的自定义属性是个很有意思的特性，除了能让我更好的管理我们的代码，实现类似CSS处理器的一些特性之外。还可以通过()配合的一些事件实现一些动画效果。正如上文中提到的动效示例。当然CSS自定义属性的其它功能还没有被我们挖掘出来，如果你发现了其更有意思的特性，欢迎与我们一起分享。
文章涉及到图片和代码，如果展示不全给您带来不好的阅读体验属性动画，欢迎点击文章底部的 阅读全文。如果您觉得小站的内容对您的工作或学习有所帮助属性动画，欢迎关注此公众号。
————————————
记述前端那些事,引领web前沿