@keyframes

Stylus 支持带大括号或不带大括号的 @keyframes，你还可以在 @keyframes 的名称或步骤中使用插值：

stylus

$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

生成（省略了扩展的前缀）：

css

@keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

扩展

通过使用 @keyframes，你的规则将自动扩展到由 vendors 变量定义的供应商前缀（默认为 moz webkit o ms official）。这意味着我们可以随时更改它，扩展效果会立即生效。

注意，在我们到达 Stylus 1.0 时，@keyframes 到带前缀的 at-rules 的扩展将被移除

例如，考虑以下情况：

css

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

这将扩展到我们的三个默认供应商，以及官方语法：

css

@-moz-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-o-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

@-moz-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-o-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

如果我们只想使用官方语法，只需简单地更改 vendors：

stylus

vendors = official

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

vendors = official

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

生成：

css

@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

@keyframes ​

扩展 ​

@keyframes

扩展