阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Stylus @keyframes

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

      扩增两个默认前缀,官方解析:

      @-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;
        }
      }
      
      目录
      本文目录
      目录