理解CSS中的關鍵幀時遇到問題

Question

我有以下關鍵幀，我想通過這些關鍵幀來制作Windows徽標的動畫：

.box {
  height: 40px;
  width: 40px;
  float: left;
}

#box1 {
  #background-color: red;
  animation: box1 4s 1s infinite;
}

#box2 {
  #background-color: lightgreen;
  animation: box2 4s 1s infinite;

}

@keyframes box2 {
   0% {
    background-color: #1b2028;
  }
  25% {
    background-color:  #1b2028;
  }
  50% {
    background-color: #1b2028;
  }
  75% {
    background-color: lightgreen;
  100% {
    background-color: #1b2028;
  }

}

@keyframes box1 {
  0% {
    background-color: red;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: red;
  100% {
    background-color: #1b2028;
  }
}

但是，問題僅在於關鍵幀之一正在工作。 即只有名稱為box2的關鍵幀有效，而當我將box1的關鍵幀放在頂部時有效，為什么會這樣。 有人可以為我提供關鍵幀的很好的理解嗎？ 指向codepen的鏈接是： https ://codepen.io/theredcap/pen/qvJdJa ? editors = 1100

Answer 1

您是否用棉短絨檢查了CSS？ CSS皮棉發現了4個錯誤和6個警告。

修正以下錯誤。

• 預期RBRACE位於第54行第9行。
• 預期RBRACE位於第72行第9行。
• 預期RBRACE位於第90行第9行。
• 預計RBRACE在第107行第9行。

您缺少結束符} :)

檢查此代碼筆： https ://codepen.io/foxfabi/pen/oVaePr