css - animation顏色變化的問題

Question

#這是初始顏色值

具體看demo

但是寫上動畫效果後顏色值就變了，這個是什麼原因，怎麼可以讓動畫顏色和初始值顏色一致

Answer 1

問題出在使用了step(2);

animation-timing-function改成step(1);
bg方法改成0%和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;
  }
}