Stylus @keyframes

2023-09-11 16:05 更新

关键帧(@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;
  }
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号