javascript - 中途通过 JS 反转动画时出现 CSS 动画故障

Question

我遇到了一个问题，在完成大约 75% 的时候停止 CSS 动画，然后反转它的顺序，然后使用 JS 继续它。如果您运行下面的代码片段，您会看到您可以轻松地停止和反转立方体的动画，并将其反转到 50%。

var div = document.getElementById('div');

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 1000)

var timer = setTimeout(function() {
  div.classList.add('reverse');
  div.classList.remove('paused');
}, 1700)

@keyframes animation {
  0% {
    margin-left: 0px;
  }
  
  100% {
    margin-left: 200px;
  }
}

#div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animation 2s linear infinite;
}

.paused {
    animation-play-state: paused !important;
}

.reverse {
    animation-direction: reverse !important;
}

<div id="div"></div>

但是，如果您尝试将其停止在 75% 并向后重新启动，它会以 25% 开始暂停动画（下面的片段）。

var div = document.getElementById('div');

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 1500)

var timer = setTimeout(function() {
  div.classList.add('reverse');
  div.classList.remove('paused');
}, 1700)

var timer = setTimeout(function() {
  div.classList.add('paused');
}, 2800)

@keyframes animation {
  0% {
    margin-left: 0px;
  }
  
  100% {
    margin-left: 200px;
  }
}

#div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animation 2s linear infinite;
}

.paused {
    animation-play-state: paused !important;
}

.reverse {
    animation-direction: reverse !important;
}

<div id="div"></div>

所以，我的问题是，有没有办法解决这个问题？某种 CSS 属性。我知道这可能不被认为是一个小故障，因为在反向完成 75% 时，框应该是 25%，即使它在屏幕上移动得太快了。

标签： javascripthtmlcsscss-animations