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

is there any way to skip to specific time in css animation? for example: if we have a div moving from left to right in 10 seconds, user change time to 5 and animation jumps to second 5 and continues playing.

CodePudding user response：

Changing animation-delay will do exactly that.
When you change it to negative values, it will jump forward.

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 ></div>
<input type="number"  />
<br/>
change the value in the input