可重复使用 @keyframes 和 CSS 自定义属性

概括

在本文中，我将与大家分享我发现的有用的 CSS 自定义属性的一个应用。

如果您像我一样，为了微交互而喜欢在页面中塞入尽可能多的动画（开玩笑的，不要这样做），那么您将使用 编写大量 CSS 动画@keyframes。

@keyframes众所周知，它缺乏灵活性，一旦声明，其值就一成不变。如果您有一组@keyframes具有相同行为但不同值的 ，则需要创建另一组。这会导致出现许多@keyframes相似但数值略有差异的 。让我们看下面的例子：

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-a-little {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.3;
  }
}

.item-1 {
  animation: fade-in 300ms ease;
}

.item-2 {
  animation: fade-in-a-little 300ms ease;
}

在上面的例子中，我们有 2 个项目，它们具有 2 个不同的动画，它们很相似，值只有细微的opacity差别100%。

现在想象一下，如果应用到更多项目上会变成什么样。随着网站规模的扩大，最终会得到数百个类似的代码@keyframes，让 CSS 文件变得臃肿不堪。我们不能容忍这种情况发生。😐

CSS 自定义属性来拯救你

CSS 自定义属性（也称为 CSS 变量）在主题设置中应用最为广泛。它还可以用于实现@keyframes可复用性！（如果您想了解 CSS 自定义属性，请参阅此处）

让我们用 CSS 自定义属性重构前面的示例！

@keyframes fade {
  0% {
    opacity: var(--fade-start, 0);
  }

  100% {
    opacity: var(--fade-end, 1);
  }
}

.item-1 {
  animation: fade 300ms ease;
}

.item-2 {
  --fade-end: 0.3;
  animation: fade 300ms ease;
}

fade-in-a-little @keyframes被移除，因为不再需要了。现在我们只有一组@keyframes fade，并将 CSS 自定义属性应用于起始不透明度值和结束不透明度值：

opacity: var(--fade-start, 0); // start

opacity: var(--fade-end, 1); // end

在此示例中，我们有 2 个自定义属性：--fade-start和。这些变量使用函数--fade-end应用（点击此处了解更多信息）。该函数接受 2 个参数：一个值和一个 fallback（默认值）。var()var()

因此，对于这一行opacity: var(--fade-start, 0);，如果--fade-start未设置，则将改为应用 0。 也同样如此--fade-end。

我们最终得到的结果是一组@keyframes可以fade在opacity: 0和opacity: 1之间默认调整的，并且可以在 CSS 选择器的范围内进行调整。🤯

等等……所以要淡出？是的！无需声明另一组@keyframesfor语句fade-out，您可以重复使用fade并将 设置--fade-start为 1，并将--fade-end设置为 0，如下所示：

.item-to-fade-out {
  --fade-start: 1;
  --fade-end: 0;
  animation: fade 300ms ease;
}

有了 CSS 自定义属性，@keyframes现在可以像函数一样，变量部分可以在后期定义，从而实现@keyframes复用。太棒了，DRY ❤️️

是时候拿出 Codepen 了

一人@keyframes完成fade所有

概括

淡入淡出动画是网络上最常见的动画之一，现在通过 CSS 自定义属性，我们可以显著减少 CSS 膨胀，同时可以根据需要进行多种变化。

考虑将其应用于@keyframes您发现自己重复了很多事情但有很多小变化的事情。

希望您觉得这有用！