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