@keyframes

Stylus 支援 @keyframes，可以搭配大括號或不搭配大括號，您也可以在 @keyframes 的名稱或步驟中使用內插

$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

$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 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 變數 (預設：moz webkit o ms official) 所定義的供應商前置詞。這表示我們可以隨時變更它，讓展開立即生效。

請注意，當我們進行時，@keyframes 展開為帶前置詞的 at 規則將從 Stylus 1.0 中移除

例如，請考慮以下內容

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

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

這會展開為我們的三個預設供應商和官方語法

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

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

如果我們只想限制為官方語法，只要變更 vendors 即可

vendors = official

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

vendors = official

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

產生

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

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

@keyframes #

展開 #

@keyframes

展開