css - 动画关键帧没有褪色？

Question

@keyframes test {

   0% { color: red;   } /* Starts red */
  50% { color: green; } /* Fades to green from red */
 100% { color: blue;  } /* Instant blue? Is no fading from green possible? */

}

是否可以正常从 0% - 50% 过渡red到green，然后blue在没有过渡的情况下立即出现？所以在上面的例子中，一旦完成 50%，它会立即变成blue（即没有从绿色淡入）直到 100% 完成？

Answer 1

看看这个小提琴工作正常

<div class="top"></div>

.top {
  width: 100px;
  height: 100px;
  background: red;
  animation: test 5s;
}

@keyframes test {
  0%   { background:red; }
  50%  { background:green; }
  50.01%  { background:blue; }
  100%  { background:blue; }
}