Stylus 关键帧(@keyframes)

引入关键帧动画

在 CSS 动画中，@keyframes 是一个非常重要的概念。它定义了动画的各个阶段，使得元素能够在指定的时间内从一种样式过渡到另一种样式。Stylus 作为一种CSS预处理器，自然也支持 @keyframes 规则，并且提供了更加简洁和灵活的方式来定义这些动画。

定义关键帧

使用百分比

你可以通过百分比来定义关键帧。例如：

fade-in
  @keyframes fade-in
    0%
      opacity 0
    100%
      opacity 1

上述代码定义了一个名为 fade-in 的动画，它从完全透明（opacity 0）逐渐变为完全不透明（opacity 1）。动画从开始（0%）到结束（100%）。

使用关键词

除了使用百分比外，你还可以使用关键词来定义关键帧。Stylus 支持 from 和 to 关键词，它们分别等同于 0% 和 100%。例如：

fade-in
  @keyframes fade-in
    from
      opacity 0
    to
      opacity 1

多个关键帧

你可以在同一个 @keyframes 规则中定义多个关键帧，以便创建更复杂的动画效果。例如，定义一个旋转动画：

rotate-360
  @keyframes rotate-360
    0%
      transform rotate(0deg)
    50%
      transform rotate(180deg)
    100%
      transform rotate(360deg)

属性简写

如果你希望简化关键帧中的属性定义，可以使用 Stylus 的属性简写功能。例如：

fade-in
  @keyframes fade-in
    0%
      opacity 0
    100%
      opacity 1

等效于：

fade-in
  @keyframes fade-in
    0%
      opacity 0
    100%
      { opacity: 1 }

嵌套规则

Stylus 允许你在 @keyframes 内嵌套其他规则，这使得代码更加整洁和易读。例如：

fade-in
  @keyframes fade-in
    0%
      opacity 0
    100%
      opacity 1
      transition opacity 2s ease-in-out

变量和函数

Stylus 支持变量和函数，这使得关键帧的定义更加动态和灵活。例如，定义一个可以根据变量改变的关键帧：

-- -------------------- ---- -------
------------------
  ---------- -------
    --
      ------- -
    ----
      ------- -
      ---------- ------- --------- -----------

-------------
  --------------
-------------
  ------------

使用关键帧

定义完关键帧之后，你需要将其应用到具体的元素上。这可以通过 CSS 的 animation 属性来完成。例如：

.box
  width 100px
  height 100px
  background-color red
  animation fade-in 2s infinite

上述代码将 fade-in 动画应用到了 .box 元素上，动画时长为 2 秒，并且无限循环播放。

结论

通过本章的学习，你应该已经掌握了如何在 Stylus 中使用 @keyframes 来定义和应用动画。利用 Stylus 的特性，你可以更加高效地创建复杂而优雅的动画效果。下一部分我们将继续深入探讨其他与动画相关的高级主题。