Если правильно понял вопрос, попробуйте это (придётся подписаться на событие
focusin):
// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
elements.forEach(element =>
{
element.style.animation = 'none';
element.offsetHeight; // Trigger reflow.
element.style.animation = null;
});
}
Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:
const map = $('.map');
map
.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
.css('--speed', Math.abs(position.y).toString());
System.resetAnimation([map[0]]);
@keyframes move-map-bg_map
{
from
{
background-position-y: var(--current-position-y);
}
to
{
background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
}
}
Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.