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>

Answer 2

解决方案是添加步骤并进行更改：

animation-timing-function: steps(2, end);

通过

animation-timing-function: step-end;

这里是新的css：

.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 {
  from {
    background-color: #000;
    color: #fff;
  }

  50%{
    color: #000;
    background-color: #fff;

  }
  to {
    background-color: #000;
    color: #fff;
  }
}

CSS3按步骤动画颜色

2 个答案: