使用自定义属性来纠缠关键帧动画中的变化

利用CSS自定义属性灵活控制关键帧动画的变体，无需预处理器！本文将探讨如何仅使用CSS和自定义属性来实现关键帧动画的自定义，避免使用预处理器（如mixins）带来的额外依赖。

您是否曾想过如何在不依赖预处理器的情况下自定义CSS动画关键帧？我经常为此求助于预处理器，但如果能摆脱这种依赖，直接使用原生CSS岂不是更好？

事实证明，仅用CSS就能实现关键帧动画变体的控制，这要归功于CSS自定义属性！让我们深入了解CSS关键帧的工作原理，以及如何利用CSS和自定义属性来增强它们。

CSS动画继承机制

当我们将动画应用于元素时，可以自定义一些属性，例如持续时间、延迟等等。来看一个简单的例子：有两个类.walk和.run，它们都使用相同的动画（名为breath），但.run的动画执行速度比.walk快（分别为0.5s和2s）。

<code>@keyframes breath {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1.5);
  }
}

/* 两者共享相同的动画，但行走比奔跑慢 */
.walk {
  animation: breath 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}</code>

每次复用动画时，它的行为会根据我们赋予它的属性而有所不同。因此，可以说动画的行为继承自应用它的元素。

但动画的规则（本例中的缩放比例）又该如何处理呢？回到breath动画的例子：.walk类执行breath动画的速度较慢，但也需要更大的缩放比例，因此我们需要将它的缩放值设置得比.run类更大，.run类则采用更小、更频繁的缩放变化。

在纯CSS中，常见的做法是复制原始动画，然后直接在类中调整值：

<code>@keyframes breath {
  /* 与之前相同... */
}

/* 与breath类似，但缩放比例不同 */
@keyframes breathDeep {
  from {
    transform: scale(0.3);
  }
  to {
    transform: scale(1.7);
  }
}

.walk {
  animation: breathDeep 2s alternate;
}

.run {
  animation: breath 0.5s alternate;
}</code>

虽然这种方法有效，但更好的解决方案是同时复用动画的属性和值！如何做到呢？利用CSS变量的继承机制！让我们看看如何实现：

<code>/* breath动画的行为基于继承的CSS变量值 */
@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}</code>

是不是很酷？现在我们无需编写重复的动画就能从同一个动画中获得不同的效果！

如果您需要更进一步，请记住我们还可以使用JavaScript更新CSS自定义属性，不仅可以更新根变量，还可以更新特定元素的变量。我发现这非常强大，因为我们可以利用JavaScript创建更高效的动画，同时不会损失CSS动画的原生优化。这真是双赢！

以上是使用自定义属性来纠缠关键帧动画中的变化的详细内容。更多信息请关注PHP中文网其他相关文章！