Как сделать зацикленную анимацию движения?

Question

[urajo]

Нужно сделать зацикленную анимацию движение вверх и вниз?
Сделать переменную в которой условно указывать направление?

$(document).ready(function(){
	let verticle = 50,
		speed = 10;
	if($('div').is('#ghoust')){
		function ghoustMove(){
			verticle++;
			if(){
				$('#ghoust').css({'bottom' : verticle});
			}
		}

		setInterval(ghoustMove, speed);
	}
});

Comments

[Виталий Першин]

лучше добавить класс в котором будет описана анимация

Answer 1

[ArtJH]

Напишите анимацию на css. Так намного экономней и легче

Answer 2

[8XL]

Добрый день.
Могу ошибаться, но в вашем случае анимация работает только вверх, значит нужно ввести какие-то ограничения.
Полагаю, стоит попробовать добавить условие, например

if(vertical >= document.height){
  vertical++
} else {
  vertical--
}

Таким образом элемент будет подниматься до высоты документа(играет роль позиционирование элемента. в вашем случае его позиционирование рассчитывается от bottom), и достигнув её, опускаться обратно.

Второе, что не является ошибкой, но считается более верной практикой:
меняйте не bottom в стиле, а transform: translateY('значение').

Третье, как уже вам посоветовали, действительно гораздо проще зациклить анимацию в CSS.

#ghost{
 position: absolute;
 bottom: 50px;
 animation: movement 10s linear infinite;

@keyframes movement{
  50% {
    transform: translateY(100px)
  }
  100%{
    transform: translateY(0)
  }