@keyframes

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

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

展开后的结果（省略了扩展前缀）：

@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）。这意味着我们可以随时更改它，以便立即生效。

请注意，@keyframes 扩展到前缀的 at-rules 将在 Stylus 1.0 中被删除

例如，考虑以下内容：

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

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

@-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：

vendors = official

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

结果为：

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

@keyframes

扩展​

扩展