CSS3动画颜色的步骤

Question

我正在尝试在按钮上制作动画，将 color 和 background-color 从白色变为黑色。

我不想要任何淡入淡出，所以我发现我可以使用 animation-timing-function: step。

但是，当我使用它时，动画并没有变黑，而是停在灰色。

.animated-play-btn {
  background-color: white;
  height: 50px;
  width: 200px;
  animation-timing-function: steps(2, end);
  animation-duration: 1s;
  animation-name: clipping_btn;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes clipping_btn {
  from {
    background-color: #000;
    color: white;
  }
  to {
    color: black;
    background-color: #fff;
  }
}

<button class="animated-play-btn">
  coucou
</button>

这里是 demo .

有谁知道如何做到这一点(当然没有 JS)？

Answer 1

这似乎是关于动画的 steps() 计时函数的“灰色”区域(双关语)。

似乎发生的情况是，当您使用 steps(2, end) 时，动画应该有两个步骤 - 一个是从黑色背景 + 白色到中间状态(两者都是灰色的)然后另一个从中间状态到白色背景+黑色(结束状态)但是第二步恰好在动画结束时发生并且几乎同时元素将进入其原始状态以开始下一个循环。因此，它给人一种印象，即白色背景 + 黑色永远不会发生。

似乎可行的解决方案是使用 steps(1, end)，开始和结束状态为黑色背景 + 白色，而中途阶段为白色背景 + 黑色。对于为什么会这样，我没有任何决定性的解释，但关键是它确实有效。

This article at designmodo是我发现的关于这个主题的唯一一个，但我仍然发现很难解释这种行为的原因。看到之后我们可以确定的一件事this example是，如果使用 steps(n, start)，汽车永远不会到达起始位置，而如果我们使用 steps(n, end)，它永远不会到达终点。这是一个 4 步动画，但只有三个步骤可见，另一个步骤发生在开始或结束时(取决于参数)。

解决方案:

.animated-play-btn {
  background-color: white;
  height: 50px;
  width: 200px;
  animation-timing-function: steps(1, end);
  animation-duration: 1s;
  animation-name: clipping_btn;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}
@keyframes clipping_btn {
  0%, 100% {
    background-color: #000;
    color: white;
  }
  50% {
    color: black;
    background-color: #fff;
  }
}

<button class="animated-play-btn">
  coucou
</button>