Javascript 设置动画持续时间的时刻

我想实现一个计时器，但它应该显示当前的分秒

所以我找到了一个codepen.io/ninjascrible/pen/rHwkK

---

如何使动画在特定时间开始？

代码笔的JS部分中有一个startDate值。默认设置为新日期

只需在此处设定日期，您就可以开始了：

var defaults = {}
  , one_second = 1000
  , one_minute = one_second * 60
  , one_hour = one_minute * 60
  , one_day = one_hour * 24
  , startDate = INSERT_YOUR_DATE_HERE
  , face = document.getElementById('lazy');

这将设置正确的时间，但仅设置计时器。 要使圆沿着正确的方向走，这有点困难，但仍然可以实现

首先，您必须了解两个oter圆是由css关键帧动画制作的。这意味着目前，我们的javascript对他们没有任何影响。它们只是预先设定为每60/3600秒运行一次

@keyframes spin1 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(225deg);
  }
  50% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

正如您可能已经知道的，堆栈溢出不是代码编写服务，但我仍然会给您一个线索：

用JavaScript计算每个圆的距离。例如：如果你的开始时间是10秒，你应该进入分钟圆圈动画的16.666%。 设置关键帧百分比以使圆从正确的位置开始。由于无法从javascript中操纵关键帧百分比，我建议遵循以下StackOverflow帖子：

---

我希望这对你有帮助。如果您被困在某个地方，请展示您的一些尝试，我很乐意为您提供更多帮助：

但这不会影响动画循环时刻