css - masalah perubahan warna animasi

Question

Ini adalah nilai warna awal

Lihat demo untuk butiran

Tetapi nilai warna berubah selepas menulis kesan animasi Apakah sebab untuk ini?

Answer 1

Masalahnya terletak pada penggunaan step(2);

fungsi pemasaan-animasi ditukar kepada langkah(1);
kaedah bg ditukar kepada 0% dan 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;
  }
}