css - animation color change problem

Question

This is the initial color value

See demo

for details

But the color value changes after writing the animation effect. What is the reason for this? How can I make the animation color consistent with the initial value

Answer 1

The problem lies in using step(2);

animation-timing-function is changed to step(1);
bg method is changed to 0% and 50%;

.min-circle:nth-child(2n - 1) {
  -webkit-animation: bg 2s steps(1) infinite;
          animation: bg 2s steps(1) infinite;
}
@keyframes bg {
 0% {
   background: #ff3c18;
  }
  50% {
    background: #ffea67;
  }
}