我正在制作一个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没有任何额外的步骤.