Witam. Uczę się css. Chciałbym wykonać pewną animację a mianowicie stworzyłem sobie kwadrat i piłkę i chciałbym aby animacja wyglądała tak że kwadrat rzuca tę piłkę ale nie wiem jak to zrobić. Nie rozumiem co odpowiada za umiejscowienie kwadratu, żeby on mi się nie ruszał , a w tej chwili to wygląda tak że kwadrat razem z piłką leci sobie do końca ekranu. JKak zrobić by sama piłka się ruszała a kwadrat był w miejscu gdzieś po lewej stronie po środku ekranu Oto kod:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ruch {
from { left: 0%; }
to { left: 100%; }
20% {left: 20%;}
40% {left: 40%;}
60% {left: 60%;}
80% {left: 80%;}
}
#scena {
position: relative;
width: 100%;
height: 100%;
background: white;
}
#przemieszczenie{
position: absolute;
width: 60px;
height: 260px;
animation-name: ruch;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-duration: 5.8s;
}
#piłka {
position: fixed;
width: 60px;
height: 60px;
border-radius: 50px;
background: black;
}
#trawnik {
height: 70px;
width: 100%;
background: green;
position: absolute;
bottom: 0;
}
#kwadrat {
position: realtive;
width:100px;
height:100px;
background-color:khaki;
}
</style>
</head>
<body>
<div id="trawnik"></div>
<div id="scena">
<div id="przemieszczenie">
<div id="piłka"><!-- --></div>
<div id="kwadrat">
</div>
</div>
</body>
</html>