理解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 lint发现了4个错误和6个警告。

修复以下错误。

• 预计在第54行第9行显示RBRACE。
• 第72行第9行的预期RBRACE。
• 第90行第9行的预期RBRACE。
• 预期的RBRACE位于第9行第107行。

您缺少结束语}：）

检查此代码笔：https://codepen.io/foxfabi/pen/oVaePr