@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`）で定義されたベンダープレフィックスに自動的に展開されます。これは、展開を即座に有効にするために、いつでも変更できることを意味します。

Stylus 1.0に移行する際に、`@keyframes`をプレフィックス付きの@ルールに展開する機能は削除されることに注意してください。

例として、以下を検討してください。

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

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

これは、3つのデフォルトベンダーと公式構文に展開されます。

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

展開