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>