css - @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 秒一个数字

还要在 10 秒内从 0 数到 9，即:每秒一位数

那么，为什么 100 秒动画会在动画开始大约五秒后显示第一个数字，然后每隔 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>