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％完成，它会立即变为blue（即没有从绿色淡入）直到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; }
}

动画关键帧没有褪色？

1 个答案: