Dan Wilson

这些功能在撰写本文时还没有出现在任何稳定浏览器中。但是，所有讨论的内容已默认包含在 Firefox Nightly 中，关键部分也包含在 Chrome Canary 中（启用了实验性 Web 平台功能标志），所以…

单一 `div` 元素很少会进行动画。如果你可以变换你的 `div` 或其伪元素，那没问题（就像 Lynn Fisher 对她精彩的 BB-8 所做的那样）。但是你无法直接改变你 `div` 内部创建的各个“元素”的 `opacity` 或 `transform`，因为它们不是实际的 DOM 元素。

我坚信尝试一些不同的有趣的事情，这样可以学习到你可能永远不会学到的工具。使用单个 `div` 的约束条件可能不适合生产工作，但它可以成为一个很好的练习（和挑战），以一种有趣的方式提升你的技能。本着这种精神，我们将使用这种技术来探索自定义属性（CSS 变量）的工作原理，并为我们提供在 `div` 内部进行动画的途径。

CSS 自定义属性（可能更容易理解为 CSS 变量）为我们提供了使代码更加简洁的方法，以及引入以前不可能实现的新的 CSS 使用方式。它们可以做到预处理器变量可以做到的事情……