css动画有两个步骤,没有过渡

时间:2016-11-26 11:33:46

标签: css css3 css-animations

我正在处理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>
&#13;
&#13;
&#13;

我想知道是否有更简单的方法可以做到这一点。我正在寻找的只是在from内使用tokeyframes而无需任何额外步骤。

2 个答案:

答案 0 :(得分:7)

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

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

@keyframes bg {
  0% {
    background: blue;
  }
  50% {
    background: grey;
  }
}
&#13;
<div></div>
&#13;
&#13;
&#13;

注意:由于this answer中讨论的问题,我在grey而不是50%设置了100%颜色的关键帧。< / p>

答案 1 :(得分:1)

您还可以使用快捷符号:

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

@keyframes bg {
  from, 50% {
    background: blue;
  }
  50.00001%, to {
    background: grey;
  }
}
&#13;
<div></div>
&#13;
&#13;
&#13;