使用 CSS Keyframes 切换状态

假设您希望一个元素在循环中以一种状态持续 9 秒，以另一种状态持续 1 秒。

状态之间没有过渡动画，只是直接切换。

前几天我一直在思考如何实现这个功能，Sarah Drasner 向我展示了，可以使用关键帧之间非常短的距离来从一种状态切换到另一种状态。 例如，从 59.999% 切换到 60%。 在 10 秒的正常动画持续时间内，这里没有过渡动画的机会。

查看 CodePen 上 Chris Coyier 的 使用快速关键帧切换状态。

可能更简洁的方法是，如果使用步骤，例如 steps(1)，您甚至不需要使用 .999 技巧。

div {
  ...
  animation: color 10s steps(10) infinite both;
}

单个关键帧 / 单个步骤切换器

这让我偶然发现了另一个非常奇怪的 CSS 现象。 您可能会认为，如果您使用 steps(1)，则根本不会发生任何变化，对吗？ 因为只有一步？ 并非如此，当您使用 steps(1) 时，实际上有 2 步，原因尚不清楚。 我们可以利用这一点。

假设我们要实现本文的原始前提：一种状态持续 9 秒，另一种状态持续 1 秒。 例如，

1-1-1-1-1-1-1-1-1-2

您可以执行以下操作

div {
  ...
  background: orangered;
  animation: color 10s steps(1) infinite both;
}

@keyframes color {
  90% {
    background: teal;
  }
}

该 div 仅以 teal 状态持续 1 秒！ 然后切换回 orangered 状态。 将关键帧更改为 70%，您将获得

1-1-1-1-1-1-1-2-2-2

将其更改为 10%，您将获得

1-2-2-2-2-2-2-2-2-2

查看 CodePen 上 Chris Coyier 的 2efd2dc514da5485073acd6f4b9f3dab。

更改状态并“保持不变”

我们现在掌握了一个非常酷的技巧，可以用来在定时循环中更改状态。 如果您不想使用循环部分，可以使动画运行一次，然后保持不变，例如

div {
  ...
  background: orangered;
  animation: color 10s steps(1) forwards;
}

@keyframes color {
  90% {
    background: teal;
  }
}

我们只删除了使动画重复的 infinite 关键字，并使用了 forwards 关键字，该关键字表示“当动画到达末尾时，保持最后状态的样式”。 （both 关键字也能实现这一点。）

但是，如何通过用户交互从一种状态切换到另一种状态？ 甚至这也有可能！ 想象一个动画，它的持续时间非常长（比如，几天又几天）。 您可以将用户交互绑定到该动画中的位置（状态）跳转。 这是一个简单的演示，其中单击链接会触发 :target 状态，从而触发动画跳转到关键帧中的位置，并为该状态设置样式。

查看 CodePen 上 Chris Coyier 的 关键帧状态切换器。

只是些技巧，伙计们。 我们将在本世纪一直陪伴着您。