Ключевые кадры анимации не исчезают?

@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%?


animation css keyframe transitions
person Sunny    schedule 18.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

взгляните на эту скрипту работает нормально

<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; }
}
person shammelburg    schedule 18.07.2013
comment
Синий должен появляться, не переходя от зеленого. - person Sunny; 18.07.2013
comment
Обходной путь 1% — это хорошо, но все же нужен способ мгновенно стать синим без малейшей задержки. - person Sunny; 18.07.2013
comment
попробуйте скрипку еще раз, пожалуйста - person shammelburg; 18.07.2013
comment
Я проголосовал за то, что это хорошее практическое решение. Но интересно, есть ли еще технический способ. - person Sunny; 18.07.2013