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? */

}

是否有可能从 red 正常过渡到 green 0% - 50%，然后 blue 在没有过渡？所以在上面的示例中，一旦完成 50%，它会立即变为 蓝色(即不会从绿色淡入)直到 100% 完成？

Answer 1

看看这个fiddle工作正常

<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; }
}