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％，即使它在屏幕上移动得太快了。

通过JS中途反转动画时CSS动画故障

0 个答案: