我正在处理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;
我想知道是否有更简单的方法可以做到这一点。我正在寻找的只是在from
内使用to
和keyframes
而无需任何额外步骤。
答案 0 :(得分:7)
您可以使用下面代码段中给出的animation-timing-function: steps(1)
来实现它。您可以在MDN中找到有关animation-timing-function
here和通用steps
值here的更多详细信息。
div {
width: 200px;
height: 200px;
animation: bg 4s steps(1) infinite;
}
@keyframes bg {
0% {
background: blue;
}
50% {
background: grey;
}
}
&#13;
<div></div>
&#13;
注意:由于this answer中讨论的问题,我在grey
而不是50%
设置了100%
颜色的关键帧。< / p>
答案 1 :(得分:1)
您还可以使用快捷符号:
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;