以x-Percent启动CSS-Animation

Question

我有一个CSS动画：

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

现在我想以63％开始播放动画。未离开= 63％，而不是动画的63％。因此元素开始移动（80 * 0.63 = 50.4）左= 50.4％;。如果这不可能，那么可以用javascript更改关键帧吗？

谢谢阅读

Answer 1

你可以使用negative animation delay跳到你想要的步骤。您必须从原始动画时间计算时间并将其设置为负动画延迟。

Answer 2

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

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

所以，我们将从一开始（第二个）回到370ms，这是动画的1秒持续时间的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