我们可以将 CSS 关键帧动画限制在一个范围内吗

Question

我想知道是否可以将关键帧动画限制在基于类名的范围内。好处是能够多次使用相同的动画名称而不会出现问题。我找不到任何有关的信息..

如果不可能：是否有处理命名冲突的最佳实践？

Answer 1

我曾经使用 SCSS 之类的东西为我的关键帧自动生成名称。它们可能没有描述性，但它们确保了唯一性。就像是：

$animation-id-count: 0 !global;

@function animation-id {

  $animation-id-count: $animation-id-count + 1;
  @return animation-id-#{$animation-id-count};

}

在此之后，只需在您的代码中使用该函数，如下所示：

.class {

  $id: animation-id();

  @keyframes #{$id}{
    ...keyframes
  }

  animation: $id 1s infinite;

}

这样，如果您将它插入到 SCSS 中的任何其他位置或移动它，它仍然会匹配正确的动画，并且它会阻止命名空间以任何方式重叠。