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