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>

我想知道是否有更简单的方法可以做到这一点.我正在寻找的是仅使用from和to内部keyframes没有任何额外的步骤.

Answer 1

您可以使用animation-timing-function: steps(1)下面的代码段中的内容来实现它.你可以找到关于更多的细节animation-timing-function 在这里和一般的steps价值在这里的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%由于此答案中讨论的问题.