Skip css animation to final state

Question

I have a page with different elements , each animating using css animation and each will start and stop respectively.

I was wondering if I could use javascript or jQuery to skip all animations to final state with one click. Is that possible?

Suppose the page has this format

   <div class="divone">text1</div>
<div class="divtwo">text2</div>
<div class="divthree">text3</div>

[https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript](https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript) — Noopur Dabhi, Dec 14 '17 at 11:58
Here is working example : [https://codepen.io/gabrieleromanato/pen/jEfbn](https://codepen.io/gabrieleromanato/pen/jEfbn) — Noopur Dabhi, Dec 14 '17 at 11:59
Thanks but I don't want it to pause. Suppose the animation is 12seconds and I'm in 4th second. I would like to go to the final 12th second with one click — Amir Shahbabaie, Dec 14 '17 at 12:01
the fiddle of @NoopurDabhi ist correct. You only have to add width: 120px; height: 120px; to #animated.off { ... } — Marouen Mhiri, Dec 14 '17 at 12:12
@AmirShahbabaie, on click of button, you can add class which has css for final animation. Just like the codepen example. — Noopur Dabhi, Dec 14 '17 at 12:16

score 0 · Answer 1 · answered Sep 23 '20 at 10:19

I have the same question and found the solution:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 4s 1 linear;
  animation-play-state: paused;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>

<h1>Change animation-play-state with JavaScript</h1>

<p>Click the buttons to Play/Pause the animation:</p>
<button onclick="myPlayFunction()">Play</button>
<button onclick="myPauseFunction()">Pause</button>

<script>
function myPlayFunction() {
  document.getElementById("myDIV").style.animationPlayState = "running";
}

function myPauseFunction() {
  document.getElementById("myDIV").style.animationFillMode = "forwards"
  document.getElementById("myDIV").style.animationDuration = "0s";
  document.getElementById("myDIV").style.animationPlayState = "paused";
}
</script>

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

</body>
</html>

Skip css animation to final state

1 Answers1