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>

这里是演示。

任何人都知道如何执行此操作（当然没有JS）？

Answer 1

相steps()对于动画的计时功能，这似乎是一个“灰色”区域（意为双关语）。

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

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

在designmodo上的这篇文章是我找到的关于该主题的唯一文章，但是我仍然很难解释这种现象的原因。看到此示例后，我们可以确定的一件事是，如果steps(n, start)使用该车，steps(n, end)它永远不会到达起始位置，而如果使用它，它就永远不会到达终点。这是一个4步动画，但只有3步可见，另一步恰好在开始或结束时发生（取决于参数）。

解：

.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>