在x%处开始CSS动画

Question

我有一个CSS动画：

@keyframes{
    from{left: 0%;}
    to{left: 80%;}
}

现在，我想在动画进行到63%时开始播放。不是从左边开始的63%，而是在动画的63%处开始。因此，元素会在（80*0.63 = 50.4）left = 50.4％处开始移动。如果这不可能，那么是否可以用JavaScript更改关键帧？

感谢阅读。

- Bamba675

Answer 1

你可以使用负动画延迟来跳转到所需的步骤。你需要从原始动画时间计算出时间，并将其设置为负的动画延迟。

- denns

Answer 2

我正在计算负动画延迟值，单位是毫秒。

-1000 - (-1000 * .63) = -370

所以，我们从开始（一秒钟）回退370ms，这相当于动画持续时间的63％。这个计算取决于提前知道动画的持续时间。

@keyframes moveBox {
  from {
    left: 0%;
  }
  to {
    left: 80%;
  }
}

.box {
  --negative-delay: calc(-1000ms - (-1000ms * .63));
  --duration: 1000ms;
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;  
  animation: moveBox var(--duration) forwards var(--negative-delay);
}

<div class="box"></div>

jsFiddle

- Andy Hoffman

---

这种方法感觉非常优雅，因为我们没有像“animation-start-at”这样的官方功能。我正在使用animation-play-state: paused的方法来针对prefers-reduced-motion，以确保它们在不进行动画时处于起始点。 - Joel Farris