Stylus 中文网

Appearance

Return to top
On this page

@keyframes

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

¥Stylus supports @keyframes both with curly braces or without them, you can also use interpolation both in names or steps of @keyframes:

$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)

产量（省略扩展前缀）：

¥Yielding (expanded prefixes ommited):

@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;
  }
}

扩张

¥Expansion

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

¥By using @keyframes, your rules are automatically expanded to the vendor prefixes defined by the vendors variable (default: moz webkit o ms official). This means we can alter it at any time for the expansion to take effect immediately.

请注意，当我们接触到 @keyframes 到前缀 at 规则时，将从 Stylus 1.0 中删除它

¥Note that expansion of @keyframes to the prefixed at-rules would be removed from the Stylus 1.0 when we'd get to it

例如，请考虑以下情况：

¥For example, consider the following:

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

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

这扩展到我们的三个默认浏览器和官方语法：

¥This expands to our three default vendors, and the official syntax:

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

¥If we wanted to limit to the official syntax only, simply alter vendors:

vendors = official

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

vendors = official

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

产量：

¥Yielding:

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

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