Почему мои анимации setInterval и setTimeout ведут себя неожиданно при переключении окон

https://codepen.io/aswinckr/pen/RJvKjq

Это вопрос из двух частей -

Я пытаюсь создать непрерывную анимацию бесконечного цикла с помощью простого javascript с методами setInterval и setTimeout с применением свойств css. Когда я переключаю вкладки браузера и возвращаюсь к этому через некоторое время, мои анимации кажутся очень неожиданными. Почему это происходит??

После прочтения в Интернете я понимаю, что requestAnimationFrame рекомендуется делать анимацию с использованием javascript. В моем случае я использую JS для запуска свойств преобразования и масштабирования в css со свойством transition. Даже если бы я использовал requestAnimationFrame с легкостью или функцией Безье, скажем, как бы я позаботился о функциональности setTimeout? Где после анимации между первой и второй картой повторить анимацию со второй на третью..

Ссылка на codepen вставлена ​​выше. Заранее спасибо!


person Aswin    schedule 02.07.2018    source источник
comment
Потому что браузер хочет сэкономить ресурсы....   -  person epascarello    schedule 02.07.2018
comment
Браузеры сильно замедляют интервальные таймеры на неактивных вкладках браузера для экономии энергии и батареи и т. д.   -  person Pointy    schedule 02.07.2018
comment
Понял, спасибо, что указали мне на это. В показанном примере он по-прежнему использует setTimeout. Разве это не влияет на оптимизацию производительности? Или это просто setInterval   -  person Aswin    schedule 03.07.2018