Stylus预处理器简介(十六)@KEYFRAMES

@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，你的规则会自动扩展到vendor变量定义的vendor前缀(默认值:moz webkit o ms official)。这意味着我们可以在任何时候改变它，使扩展立即生效。

请注意，当我们使用Stylus 1.0时，@keyframes扩展到前缀at-rules将被删除

例如，考虑以下情况:

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