Stylus

英语

中文
中文(张鑫旭)
返回顶部
在此页面

@keyframes

Stylus 支持带大括号或不带大括号的 @keyframes，你还可以同时在 @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)

生成（省略展开的前缀）

@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 规则中

例如，考虑以下内容

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

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

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

vendors = official

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

生成

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

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