L3F.WIN

Github及Hexo的使用

0%

学习stylus【14】@KEYFRAMES

发表于 更新于 分类于

@KEYFRAMES

Stylus支持@keyframes规则，当编译的时候转换成@-webkit-keyframes：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

  =>
  @keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

扩展

使用@keyframes，通过vendors变量，会自动添加私有前缀(webkit moz official)。这意味着你可以子啊任意时候立即高效地做修改。
考虑下面的例子：

1
2
3
4
5
6
7
8
@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

这扩展到我们的三个默认供应商和官方语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@-moz-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@-o-keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}
@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}

如果我们只想限制官方语法，只需更改vendor：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
vendors = official

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

=>
@keyframes foo {
  from {
    color: #000;
  }
  to {
    color: #fff;
  }
}