巧用 CSS 变量，实现动画函数复用，制作高级感拉满的网格动画

本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 @keyframes 的复用。

CSS 变量

CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。

CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下：

// 声明一个变量：
:root{
  --bgColor: #000;
}

这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类，在全局 :root{ } 伪类中定义了一个 CSS 变量，取名为 --bgColor 。

定义完了之后则是使用，假设我要设置一个 div 的背景色为黑色：

.main{
  background:var(--bgColor);
}

这里，我们在需要使用之前定义变量的地方，通过 var(定义的变量名) 来调用。

在 @keyframes 中使用 CSS 变量

OK，回归我们的正题。巧用 CSS 变量，实现动画函数复用。

假设，我们现在有多个元素，需要实现一个位移动画，从位置 A 位移到 位置 B，位置 A 相同，但是位置 B 不一样，像是这样：

正常而言，由于终点不一样，我们可能需要实现 3 个不一样的 @keyframes，像是这样：

<ul>
    <li>li>
    <li>li>
    <li>li>
ul>

li:nth-child(1) {
    animation: move1 2s linear;
}
li:nth-child(2) {
    animation: move2 2s linear;
}
li:nth-child(3) {
    animation: move3 2s linear;
}

@keyframes move1 {
    60%,
    100% {
        transform: translate(150px);
    }
}
@keyframes move2 {
    60%,
    100% {
        transform: translate(120px);
    }
}
@keyframes move3 {
    60%,
    100% {
        transform: translate(200px);
    }
}

这个代码有问题吗？没有。

但是，我们可以利用 CSS 变量，让它变得更为简洁，我们改造一下 @keyframes 代码，将固定的位移值，变成一个变量：

@keyframes move {
    60%,
    100% {
        transform: translate(var(--dis));
    }
}

由于 CSS 变量是存在作用域的，我们可以通过 CSS 变量的方式，给每一个 li 定义一个不同的 --dis 变量，像是这样：

li:nth-child(1) {
    --dis: 150px;
}
li:nth-child(2) {
    --dis: 120px;
}
li:nth-child(3) {
    --dis: 200px;
}

这样，虽然动画的结束点不一样，但是我们利用 CSS 变量，复用了同一个 @keyframes 函数：

通过内联 style 属性传入自定义变量

除了通过在