Question

请帮助我理解为什么以下CSS动画不会在红色和蓝色之间来回产生颜色切换。

div {animation: colorswitch 1s step-end infinite}
@keyframes colorswitch {0% {color:red} 100% {color:blue}}

<div>text</div>

作为计时功能，我指定step-end，它应该直接跳转到最终状态。但它不起作用。

Answer 1

啊......我想我看到了这个问题。我认为这就是你所追求的。

＆＃13;

div {
  font-size: 72px;
  animation: colorswitch 1s step-end infinite;
}
@keyframes colorswitch {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
}

＆＃13;

<div>
  text</div>

＆＃13;

Answer 2

这是一个彩色切换动画的解决方案。

div {
    animation: colorswitch 1s step-end infinite;
}
@keyframes colorswitch {
    0% {color:red}
    50% {color:blue}
}

demo

仍然试图理解为什么它会像这样。

为什么50％有效？

它也适用于 -

@keyframes colorswitch {
    0% {color:red}
    50% {color:blue}
    100% {color:blue}
}

添加

@keyframes colorswitch {
    0% {color:red}
    50% {color:blue}
    100% {color:red}
}

用于在两种状态之间切换的CSS动画

2 个答案: