以 x-Percent 开始 CSS 动画答案

【问题标题】：Start CSS-Animation at x-Percent以 x-Percent 开始 CSS 动画
【发布时间】：2019-03-10 16:38:24
【问题描述】：

我有一个 CSS 动画：

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

现在我想以 63% 的速度开始播放动画。未离开 = 63%，而不是动画的 63%。所以元素开始在 (80*0.63 = 50.4) left = 50.4%; 处移动。如果这不可能，那么是否可以使用 javascript 更改关键帧？

感谢阅读

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

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

【讨论】：

【解决方案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);
}

&lt;div class="box"&gt;&lt;/div&gt;

jsFiddle

【讨论】：

这感觉恰到好处，因为我们没有正式的 animation-start-at 这样的东西。我将这种方法与animation-play-state: paused 与prefers-reduced-motion 一起使用，以确保它们在不制作动画时处于起点。