Как остановить анимацию на последнем кадре?
 

Доброй ночи! Ребята надеюсь на помощь знающих, сам в js почти что нуб, только начал изучение, но вот появилась задача которую нужно решить. А именно организовать простенькую фоновую анимацию на сайте. На просторах интернета решение было найдено, но дело в том, что анимация получилась зацикленной, а мне нужно остановить ее на последнем кадре. Подскажите пожалуйста что нужно поправить, чтобы добиться желаемого эффекта.

Вот код:

var animated_element = document.getElementById('bg');
			
	var frame_width = animated_element.offsetWidth;			
	var total_frames = 4;			
        var frame_count = 0;
        
setInterval(function(){
			
       var new_x = (frame_count * frame_width) * -1;
       animated_element.style.backgroundPosition = new_x+'px 0px';
			 
			 if (frame_count < total_frames){
				frame_count += 1;
				}else{
				frame_count = 0;				
				}
			 
			
			},400);

VictorHub,

var animated_element = document.getElementById('bg');

  var frame_width = animated_element.offsetWidth;
  var total_frames = 4;
        var frame_count = 0;

var timer = setInterval(function(){

       var new_x = (frame_count * frame_width) * -1;
       animated_element.style.backgroundPosition = new_x+'px 0px';

       if (frame_count < total_frames){
        frame_count += 1;
        }else{
        window.clearTimeout(timer)
        }


      },400);

Доброе утро! Спасибо, но ваше решение останавливает анимацию на первом кадре спрайта. https://codepen.io/VictorHub/full/qXNMPP Сейчас пытаюсь на основе полученного ответа решить вопрос, но пока кроме ошибок в консоли у меня ничего не получается(((

VictorHub, смените кол-во кадров с 4 на 3.

var total_frames = 3;

Вы меня сильно выручили, всем спасибо! Жаль, я пока не способен сам находить такие решения так как еще даже не дочитал до средины книгу по JavaScript. А если бы и нашел то метод тыка занял бы у меня целый день, а то и два:blink: