使用CSS关键帧交换状态

假设您希望某个元素在一个循环中处于一种状态9秒钟，而处于另一种状态1秒钟。

状态之间不进行任何补间，只是直接交换。

我想知道这一天该怎么办，萨拉·德拉斯纳（Sarah Drasner）向我展示了您可以使用关键帧之间真正短的距离从一种状态切换到另一种状态。 就像59.999％到60％。 没有机会在正常的动画持续时间（例如10秒）之间进行补间。

在CodePen上查看 Chris Coyier （ @chriscoyier ）的“使用快速关键帧更改进行笔状态更改” 。

也许稍微干净一点，如果使用以下步骤，您甚至不必对.999东西变得棘手：

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

单关键帧/单步转换器

这使我偶然发现了另一种超级奇怪CSS东西 。 您会认为，如果使用steps(1) ，根本不会发生任何变化，对吗？ 既然只有一步？ 并非如此，当您使用steps(1)进行谁知道什么推理时，实际上有两个步骤。 我们可以使用它。

假设我们要使用本文的原始前提：一种状态持续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 （ @chriscoyier ）的Pen 2efd2dc514da5485073acd6f4b9f3dab 。

更改状态并“呆在那里”

现在，我们有了一个很酷的技巧，可以在定时循环中更改状态。 如果您不希望循环部分，则可以让动画运行一次并停留在该位置，例如：

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

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

我们在这里所做的所有操作都删除了使之重复的infinite关键字，并使用forwards表示“当到达末尾时，将样式保持在最终状态”。 （ both关键字也可以这样做。）

但是，如何通过用户交互从一种状态转换为另一种状态？ 甚至有可能！ 想象一个动画，它具有超长的持续时间（例如几天和几天）。 您可以将用户交互与在其中的位置（状态）跳转相关联。 这是一个简单的演示，其中单击链接会触发:target状态，该状态会触发动画跳到该状态的关键帧中的某个位置：

在CodePen上查看 Chris Coyier （ @chriscoyier ）的Pen Keyframe State Changer 。

伙计们，只是花招。 我们将在这里呆十年。

翻译自: https://css-tricks.com/swapping-state-css-keyframes/