Javascript 以x百分比启动CSS动画

我有一个CSS动画：

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

现在我想开始播放动画，比如63%。非左=63%，而是动画的63%。因此，元素开始在（80*0.63=50.4）左=50.4%处移动；。如果不可能，那么是否可以使用javascript更改关键帧

---

感谢阅读

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

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

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

因此，我们将从一开始（一秒钟）返回

370ms

，这是动画持续1秒的63%。此计算取决于提前知道动画持续时间

@关键帧移动框{
从{
左：0%；
}
到{
左：80%；
}
}
.盒子{
--负延迟：计算（-1000ms-（-1000ms*.63））；
--持续时间：1000ms；
宽度：100px；
高度：100px；
背景颜色：绿色；
位置：绝对位置；
动画：moveBox变量（--持续时间）转发变量（--负延迟）；
}

---

这感觉非常优雅，因为我们没有正式的

动画开始。我将此方法用于
动画播放状态：暂停
for
首选减少运动
以确保它们在不设置动画时处于起点。