Html 用于编号样式的动态CSS样式

我有四个不同延迟的动画。具体来说，我有四种CSS样式，每种样式对应一个延迟

它们是：

.delay-1、.delay-2、.delay-3、.delay-4

。所以格式是

.delay-[number]

。每个都有一个延迟

number*400ms

。有没有可能有某种功能允许我动态设置延迟？因此，如果我有延迟-6，延迟将是6*400ms或2400ms

我似乎在谷歌或stackoverflow上找不到这方面的任何信息。也许我问错了事情/用错了措词

---

如果可能的话，我更愿意使用纯CSS来实现这一点。

好吧，假设命名约定为.delay-[number]我编写了一个函数，用于计算特定类的延迟，并将单击类的CSS属性“animation delay”设置为计算延迟。假设您单击class.delay-6，则该类的动画延迟属性将设置为2400ms

$('[class^="delay-"]').click(function(){
  var num = this.className.replace(/[^0-9]/g, '')
  var delay = num * 400+'ms';
  this.style.animationDelay = delay;
  console.log("delay for class " + this.className+ " is " + delay);
});

您可以根据您的用例调整此方法。我不知道在你的情况下，什么应该触发延迟计算，所以点击它

这是一个jsbin，您可以使用它：

---

希望这有帮助。

对于香草css，不，这是不可能的。但是，使用css预处理器（如SASS或更少）可以为css属性分配动态值。不…css不能这样做。你需要javascript。即使预处理器输出CSS…因此，尽管编写起来更容易、更快，但最终还是会得到相同的输出CSS。我有一个

app.scss

文件——这意味着这是可能的吗？我们怎么知道？我们没有档案…但答案仍然是“没有”。CSS不是那样工作的。请忽略jsbin中的“try it”按钮，它没有任何作用，我只是忘记删除它。另外，纯css解决方案似乎是不可能的。