如何按秒跳到css-动画中的特定时间？

Question

有什么方法可以跳到css动画中的特定时间吗？例如：如果我们有一个 div 在 10 秒内从左向右移动，用户将时间更改为 5，动画跳到第 5 秒并继续播放。

Answer 1

改变 animation-delay 就可以做到这一点。
当你把它改成负值时，它会向前跳转。

const selectElement = document.querySelector('.number');
selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.some-div');
  result.style.animationDelay = `${event.target.value}s`;
});

.some-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 20s;
  animation-delay: 0;
}

@keyframes example {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(400px);
  }
}

<div class="some-div"></div>
<input type="number" class="number" />
<br/>
change the value in the input

如何按秒跳到css-动画中的特定时间？

How to skip to a specific time in css-animations by seconds?

css

animation

css-animations