Animowanie div-a w sposób skokowy

0

Witam. Jestem na poczatku drogi. Html i css przebiegaja jakoś bez bólu ale js oj! topornie.
Nie wiem jak rozwiazać taki problem:
Chciałbym animować w sposób skokowy div-a, tzn: animacja zaczyna sie od lewej strony . Na kliknięcie w przycisk div wyczekuje 1s i w natępnej sekundzie przemieszcz sie o 34 px. Czeka sekundę i znowu przemieszcz się o 34 px i tak aż wylezie ze strony.
Poniżej to co napisałem i dalej ani w ząb. Pomóżcie jak sie do tego zabrać (w js). (Chwilowo style i script w jednej kupie dla wygody oglądania). Z góry dzięki

<!DOCTYPE html>
<html>

    <head></head>
	<body>
		<button id="btnStart">startAnim</button>
		<div id="redBox">
		</div>
		<style>
			body {
				margin: 0;	
			}
	
			#redBox {
				background-color: crimson;
				position: absolute;
				display:flex; /*dlatego, że posiada zawartość*/
				width: 313px;
				height: 100px;
				bottom: 200px;
				}
			
			@keyframes run {
				0% {left:0px; bottom:200px}
				50% {left:0px; bottom:200px}
				100% {left:34px; bottom:200px}
			}
		</style>
		
		<script>
			function jump() {
				redBox.style.animation = "run 1s 1s";
				}
			
			
			
			btnStart.addEventListener("click", jump)	
		</script>
	</body>
</html>
0

Dzieki Fasadin. Zmusiłeś mnie ( i słusznie) do zapoznania sie z jQuery.
Zrobiłem coś takiego i pewnie jest to jakiś krok do przodu, ale w dalszym ciągu nie potrafię zautomatyzować tej animacji.
Chcę jednym kliknięciem wywołać skokowe przejście diva. Jakieś nowe sugestie.
Oto moje zmiany - prawie puściłęm bańkę nosem z radości.

<!DOCTYPE html>
<html>

    <head></head>
	<body>
		<button id="btnStart">startAnim</button>
		<div id="redBox">
		</div>
		<style>
			body {
				margin: 0;	
			}
	
			#redBox {
				background-color: crimson;
				position: absolute;
				display:flex;
				width: 313px;
				height: 100px;
				bottom: 200px;
				}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
		</script>
		<script>
			$( "#btnStart" ).click(function() {
  				$( "#redBox" ).animate({ "left": "+=34px" }, 1000, );
				});
 			
			
		
		</script>
			
	
	</body>
</html>
0

Mój kolejny krok w animacji skokowej diva jest taki jak w kodzie poniżej. Ale jak zautomatyzować te skoki w jQuery dalej nie wiem.Pomocy!

<!DOCTYPE html> <html>
<head></head>
<body>
	<button type="button">startAnim</button>
	<div id="redBox">
	</div>
	<style>
		body {
			margin: 0;	
		}

		#redBox {
			background-color: crimson;
			position: absolute;
			display:flex;
			width: 313px;
			height: 100px;
			
			
			}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script>
	<script>
		jQuery(function ($) {
			$("button").click(function () {
				var div = $("#redBox");
				div.animate({ "left": "+=34px" },1000,).delay(1000);
				div.animate({ "left": "+=34px" },1000,).delay(1000);
				div.animate({ "left": "+=34px" },1000,).delay(1000);
			});
		});
			/* itd. aż do opuszczenia okna */				
		
		
	</script>
		

</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1