javascript - Best Practice - Javascript Animation using timed background image changes

Question

I'm fairly new to coding / javascript and was wanting to get feedback on a method I'm using. I got frustrated trying to import multiple adobe animate html5/javascript files so I reverted to:

• exporting the animations frame by frame (.png)
• using javascript to call a local file and change the 'src' of a div given a specific interval

filename1 - is the folder file filename - is the .png filename

Is this bad practice or is there better more efficient way to do this? I plan on having it triggered in an interactive site when users click on different areas of an image. Worried the constant calling of files could be an issue and I'm unsure what would happen if someone triggered a new animation while one was still running?

So far it seems to be running okay, it does 'jitter' every once and a while if I interact with the site while an animation is running.

function playTargetAnimation (filename1,filename) {
      let i = 1;
      $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + '0001' + ".png");
      $('#'+filename1).show();
      let runAnim = setInterval(function(){
      let imgCnt = "00" + ("0" + i).slice(-2);
       $('#'+filename1).attr('src', "images/" + filename1 +"/" + filename +"/" + filename + imgCnt + ".png");
       console.log('src', "images/" + filename +"/" + filename + imgCnt + ".png");
       i++;
       if(i === 41) {
         clearInterval(runAnim);
       };
     }, 25);
  }

Answer 1

@import "compass/css3";

.hi {
  margin: 20px;
  width: 50px;
  height: 72px;
  background-image: url("https://s.cdpn.io/79/sprite-steps.png");
  
}
.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}

<div class="hi"></div>
<p>↑ mouse over to view animation</p>
<div><img src="https://s.cdpn.io/79/sprite-steps.png" /></div>

If you prefer javascript, requestAnimationFrame is much better than setInterval.

While my suggestion is css3 animation doc in mdn:

First composite all those frame pictures into one picture file regularly.

Then write css with "animation" and "steps function".

.hi:hover{
  animation: play .8s steps(10);  
}

@keyframes play {
  from {
    background-position:    0px;
  }
  to {
    background-position: -500px;
  }
}