Stylus @keyframes

關(guān)鍵幀(@keyframes)

@keyframes

Stylus支持@keyframes規(guī)則，當(dāng)編譯的時(shí)候轉(zhuǎn)換成@-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);
  }

}

擴(kuò)展

使用@keyframes，通過(guò)vendors變量，會(huì)自動(dòng)添加私有前綴(webkit moz official)。這意味著你可以子啊任意時(shí)候立即高效地做修改。

考慮下面的例子：

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

擴(kuò)增兩個(gè)默認(rèn)前綴，官方解析：

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

如果我們只想有標(biāo)準(zhǔn)解析，很簡(jiǎn)單，修改vendors：

vendors = official

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

生成為：

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

  100% {
    color: #fff;
  }
}