具有两个步骤且没有过渡的CSS动画

Question

我正在制作一个 css 动画来切换元素的背景颜色。

这个动画只有两个阶段，两个阶段之间没有平滑的过渡。

这意味着，动画的前 50%，背景色将为 blue，动画的最后 50%，背景色将为 grey ，中间没有过渡。

下面是完整运行的动画:

div {
  width: 200px;
  height: 200px;
  animation: bg 4s linear infinite;
}

@keyframes bg {
  0% {
    background: blue;
  }
  50% {
    background: blue;
  }
  50.00001% {
    background: grey;
  }
  100% {
    background: grey;
  }
} 

<div></div>

我想知道是否有更简单的方法来做到这一点。我正在寻找的是在 keyframes 中仅使用 from 和 to，无需任何额外步骤。

Answer 1

您可以使用 animation-timing-function: steps(1) 实现它，如下面的代码片段所示。您可以找到有关 animation-timing-function 的更多详细信息 here和通用 steps 值 here在 MDN 中。

div {
  width: 200px;
  height: 200px;
  animation: bg 4s steps(1) infinite;
}

@keyframes bg {
  0% {
    background: blue;
  }
  50% {
    background: grey;
  }
}

<div></div>

注意:我已将 grey 颜色的关键帧设置为 50% 而不是 100% 由于this answer 中讨论的问题.