一、简介

Stylus 支持原生的 @keyframes ，支持使用缩进、嵌套等语法，同时在动画名称和关键帧步骤中都可以使用插值：

$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 变量（默认值：moz webkit o ms official）扩展生成对应的浏览器厂商前缀。这意味着我们可以随时修改它来立即生效。

注意：在未来的 Stylus 1.0 版本中，将不再自动为 @keyframes 生成带前缀的@规则

示例演示：

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

若需要仅生成官方标准语法，只需修改 vendors 变量：

vendors = official

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

编译为：

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

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24