通过关键帧加载微调器动画-无法掌握概念吗？

Question

我正在学习CSS动画，并且我认为我从概念上了解了它的工作原理。

我决定创建一个加载微调器：一个div，其宽度/高度为0，但其边界经过调整以创建“钻石”外观：

然后的想法是，此微调框的动画将有5个“状态”：

1. 初始状态0-可以看到完整的菱形
2. 状态1：打开左边框，其余3个都关闭
3. 状态2：顶部边框打开，所有其他边框关闭
4. 状态3：右侧边框打开，所有其他边框关闭
5. 状态4：打开底部边框，关闭所有其他边框

我认为上述逻辑实现很简单：

• 创建一个div，向其添加类“ spinner”。
• 以CSS样式将div设置为初始状态
• 创建动画参考
• 创建@keyframes动画：0％，100％=初始状态0，20％=状态1，40％=状态2，60％=状态3，80％=状态4

然后确保将动画设置为无穷大，就这样，这就是实现，并且它肯定不能按我上面期望的那样工作。

.spinner {
  /* initial state 0 */:
  position: absolute;
  left: 20px;
  top: 20px;
  width: 0px;
  height: 0px;
  border-left: 100px solid darkgrey;
  border-top: 100px solid lightgrey;
  border-right: 100px solid grey;
  border-bottom: 100px solid black;
  background-color: dimgrey;
  animation: spinning 3s infinite;
}
@keyframes spinning {
  0%, 100% {
/* initial state 0 */
border-left: 100px solid darkgrey;
border-top: 100px solid lightgrey;
border-right: 100px solid grey;
border-bottom: 100px solid black;
  }
  20% {
/* state 1 */
border-left: 100px solid darkgrey;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
  }
  40% {
/* state 2 */
border-left: 100px solid transparent;
border-top: 100px solid lightgrey;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
  }
  60% {
/* state 3 */
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-right: 100px solid grey;
border-bottom: 100px solid transparent;
  }
  80% {
/* state 4 */
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;
  }
}

<div class="spinner"></div>

我在这里想念什么？我想了解以下逻辑CSS动画？我阅读了一些有关CSS技巧的文章，但这些是更多有用的示例，我想掌握背后的概念； /有什么建议吗？

更新：似乎我留下了一些逗号；（修正了例子

Answer 1

您的keyframes定义中的逗号和冒号打破了它。删除它们，使它看起来像这样：

@keyframes spinning {
  0%, 100% {
    /* initial state 0 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid lightgrey;
    border-right: 100px solid grey;
    border-bottom: 100px solid black;
  }
  20% {
    /* state 1 */
    border-left: 100px solid darkgrey;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  40% {
    /* state 2 */
    border-left: 100px solid transparent;
    border-top: 100px solid lightgrey;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
  }
  60% {
    /* state 3 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid grey;
    border-bottom: 100px solid transparent;
  }
  80% {
    /* state 4 */
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid black;
  }
}