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

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;
  }
}