css - 理解 css 中关键帧的问题

Question

我有以下关键帧，我想通过这些关键帧为 Windows Logo 设置动画:

.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 个警告。

修复以下错误。

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

您缺少结束符 } :)

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