理解css中的关键帧的问题

Question

我有以下关键帧，我想通过这些关键帧来制作窗口徽标的动画：

.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

你用 linter 检查你的 CSS 了吗？ CSS lint 发现 4 个错误和 6 个警告。

修复以下错误。

• 预期 RBRACE 在第 54 行，第 9 列。
• 预计 RBRACE 在第 72 行，第 9 列。
• 预期 RBRACE 在第 90 行，第 9 列。
• 预计 RBRACE 在第 107 行，第 9 列。

你错过了一个结束 } :)

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