@keyframes 动画中的计时

Question

所以我制作了一个简单的项目，它会显示一个计时器并仅使用 HTML 和 CSS 计数到 99。

但是有谁能告诉我为什么我需要延迟 100 秒动画以使其与 10 秒动画同步？

.second::before {
  animation: time 100s linear 4.5s infinite;
  /* Why do I have to put a delay to get this to sync properly with the second counter!?? */
  content: "0";
}
.second::after {
  animation: time 10s linear infinite;
  content: "0";
}
@keyframes time {
  10% {
    content: "1"
  }
  20% {
    content: "2"
  }
  30% {
    content: "3"
  }
  40% {
    content: "4"
  }
  50% {
    content: "5"
  }
  60% {
    content: "6"
  }
  70% {
    content: "7"
  }
  80% {
    content: "8"
  }
  90% {
    content: "9"
  }
}

 <span class="second"></span>

看起来很简单；在 100 秒内从 0 数到 9，即：每十秒一个数字

同样在 10 秒内从 0 数到 9，即：每秒一位数

那么为什么（没有延迟）100 秒动画会在动画大约 5 秒后显示第一个数字，然后每隔 10 秒显示另一个数字？

CodePen 示例如下：oldTimer

Answer 1

您设置动画的方式，一个值为 10%，另一个值为 20%，变化发生在中间点，即 15%。

这意味着一个动画与您所相信的相差 0.5 秒，而另一个动画则相差 5 秒。净差为4.5s

为避免这种情况，请将步骤设置在您希望它们发生的确切位置：

.second { font-size: 80px; }

.second::before {
  animation: time 100s linear infinite;
  /* Why do I have to put a delay to get this to sync properly with the second counter!?? */
  content: "0";
}
.second::after {
  animation: time 10s linear infinite;
  content: "0";
}
@keyframes time {
  0%, 9.99% {
    content: "0";
    background-color: blue;
    }
  10%, 19.99% {
    content: "1";
    background-color: green;
  }
  20%, 29.99% {
    content: "2";
    background-color: tomato;
  }
  30%, 39.99% {
    content: "3"
  }
  40%, 49.99% {
    content: "4"
  }
  50%, 59.99% {
    content: "5"
  }
  60%, 69.99% {
    content: "6"
  }
  70%, 79.99% {
    content: "7"
  }
  80%, 89.99% {
    content: "8"
  }
  90%, 100% {
    content: "9"
  }
}

<span class="second"></span>