Question

所以我正在创建一个简单的项目，它将显示一个计时器，并使用HTML和CSS计数到99。

但有人可以告诉我为什么我需要延迟我的100s动画才能让它与10s动画同步？

＆＃13;

.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"
  }
}

＆＃13;

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

＆＃13;

看起来很简单;在100秒内从0到9计数，即：每十秒一位数

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

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

以下代码示例：oldTimer

Answer 1

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

这意味着一个动画与你认为的动画相差0.5秒，而另一个动画则相差5秒。净差为4.5秒

为避免这种情况，请将步骤设置为您想要的位置：

＆＃13;

.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"
  }
}

＆＃13;

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

＆＃13;

@keyframes动画的时间安排

1 个答案: