2

I am having an issue stopping a CSS animation at about 75% of the way complete and then reversing its order and then continuing it using JS. If you run the snippet below and you'll see that you can easily stop and reverse the animation of the cube and reverse it at 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>

But, if you try to stop it at 75% and restart it backwards, it starts the paused animation at 25% (Snippet below).

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>

So, my question is, is there a way around this? Some sort of CSS property. I know that this may not be considered a glitch, because at 75% complete on reverse, the box should be at 25%, even though it moves across the screen much too quickly.

Jack
  • 1,893
  • 1
  • 11
  • 28
  • Out of curiousity, what is the purpose? What project are you working on that needs this? – Marvin May 18 '19 at 00:12
  • 1
    related : https://stackoverflow.com/a/51221329/8620333 maybe you can apply the same trick – Temani Afif May 18 '19 at 00:13
  • @Marvin, I am trying to make a live project goal chart. Basically, you input a goal and current funds number and the system get a percentage based upon them. I then have a function which will play the animation to a certain percent, say 75% and then stops it the animation (basically a block rises to 75%). Looking back, I might have had it easier if I had just added the styles via JS, instead of trying to use a CSS animation, but using CSS did make the creation of the animation much easier. – Jack May 18 '19 at 00:16
  • @TemaniAfif Thanks for the link. My animation is slightly different in that it has 10 key frames instead of 2 like in the example. That would make me unable use the same trick the answer provided. If need be, it would be possible to only have 2 key frames, but it would be a noticeable change in quality of my project. – Jack May 18 '19 at 00:28

0 Answers0