stylus中文版参考文档之关键帧(@keyframes)

回到相关文章 »

详细:

关键帧(@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;
  }
}
注: ①本文档有个与函数比肩的重要概念-mixin, 我将其译为混合书写,混入或混写。②点击这里可回到文档首页。

stylus中文文档翻译完全凭着个人兴趣一点一点整理出来的,为了这个文档可以更好地更新维护下去,您可以:

支付宝微  信