Stylus 关键帧(@keyframes)

定义和使用

Stylus 支持 @keyframes 规则，当编译的时候转换成 @-webkit-keyframes：

@keyframes pulse
  0%
    background-color red
    opacity 1.0
    -webkit-transform scale(1.0) rotate(0deg)
  33%
    background-color blue
    opacity 0.75
    -webkit-transform scale(1.1) rotate(-5deg)
  67%
    background-color green
    opacity 0.5
    -webkit-transform scale(1.1) rotate(5deg)
  100%
    background-color red
    opacity 1.0
    -webkit-transform scale(1.0) rotate(0deg)

生成为：

@-webkit-keyframes pulse {
  0% {
  background-color: red;
  opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }

  33% {
    background-color: blue;
    opacity: 0.75;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }

  67% {
    background-color: green;
    opacity: 0.5;
    -webkit-transform: scale(1.1) rotate(5deg);
  }

  100% {
    background-color: red;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }

}

扩展

使用 @keyframes，通过 vendors 变量，会自动添加私有前缀(webkit moz official)。这意味着你可以子啊任意时候立即高效地做修改。

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

扩增两个默认前缀，官方解析：

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}@-moz-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}

如果我们只想有标准解析，很简单，修改 vendors：

vendors = official
@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

生成为：

@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}