手写笔变量插值在动画属性中不起作用？

Question

我在使用变量插值在Stylus中始终如一地工作时遇到了很多麻烦。 在这里使用它当前在CodePen上的版本，没有Javascript或任何东西。

下面的代码手写笔在我看来就像它将动画与动漫slide0 DIV0，与动画滑件，等等等等动画DIV1 ...

for i in (0...4)
  .div{i}
    width: 300px
    animation: slide{i} 1s infinite //Syntax error here

  @keyframes slide{i}
    0%
      letter-spacing: i*3px
    100%
      letter-spacing: 0px

...但它只是给animation:上的语法错误animation:行。 对我来说没有意义的是为什么当我在.div{i}和@keyframes slide{i}编写完全相同的语法时，为什么@keyframes slide{i} ，而不是在animation: slide{i} 。

这是CodePen给我的错误，它似乎没有那么相关？

stylus:4:24
   1| for i in (0...4)
   2|   .div{i}
   3|     width: 300px
   4|     animation: slide{i} 1s infinite
-----------------------------^
   5|   
   6|   @keyframes slide{i}
   7|     0%

expected ":", got "}"

Answer 1

目前，您不能在属性或字符串的值内使用插值。 但是你可以使用连接：

for i in (0...4)
  .div{i}
    width: 300px
    animation: slide + i 1s infinite

@keyframes slide{i}
  0%
    letter-spacing: i*3px
  100%
    letter-spacing: 0px

Answer 2

您可以提供问题的编解码器，或尝试animation-name: slide{i}单独animation-name: slide{i}