Как сделать бесконечный цикл смены классов для анимации?

Question

[milka326]

Мне нужно было сделать анимацию объекта влево-вправо. Анимация на спрайтах.
Я сделал анимацию через keyframes на css с помощью transform: translateX
Чтобы изменять направление спрайта я изменяю класс у div контейнера с фреймами в htmlдобавляю класс,который меняет спрайт на нужный.Классы для смены спрайтов объявлены в css.
Я столкнулся с проблемой,что не знаю как сделать бесконечный цикл в котором мой объект постоянно будет менять класс(направление картинки-спрайта,например с "right" на "left") в html с помощью скрипта.
Я сделал 2 функции,которые меняют направление изображения 2 раза,но мне нужно чтобы это было циклично/бесконечно.
Также хотел сделать что-то типо hover эффекта,когда я навожу на объект и цикл прерывается,класс изменяется на другой,при котором мой объект имеет анимацию на месте и стоит,но если убрать курсор,то продолжает движение с того же места в бесконечном цикле.

Код JS:
function turnLeft() {
$(".Character_spritesheet").removeClass("face-right");
$(".Character_spritesheet").addClass("face-left");
};
function turnRight() {
$(".Character_spritesheet").removeClass("face-left");
$(".Character_spritesheet").addClass("face-right");
};

$(document).ready(function() {
setTimeout(turnLeft,8500);
});
$(document).ready(function() {
setTimeout(turnRight,16100);
});

Comments

[trofimovfedor]

Пожалуйста, оформляйте код в теги для более удобного чтения.

Answer 1

[trofimovfedor]

Для создания бесконечного цикла необходимо в аргументы к while указать true. Hover эффект создается путем условий.

while(true) {
#action
}

Comments

[milka326]

Не могу использовать,загружает проц,сайт,в итоге ничего не открывается.Мб есть вариант провернуть это не через бесконечный цикл?

[trofimovfedor]

milka326, попробуйте создать функцию которая с необходимым вам интервалом будет вызывать другую функцию отвечающую за анимацию и повесте её на тег body используя атрибут onload

[milka326]

Фёдор Трофимов, Сама анимация прописана в css3,нужно чтобы менялся класс ответственный за направление спрайта,получается я могу туда вложить 2 функции с их интервалами и они должны будут повторяться?

[trofimovfedor]

milka326, создаете одну функцию где с определенной периодичностью вызываете другую, а в ней в конце ту которая вызывает её и ставите на атрибут on load. В функции меняйте класс