Animacja - CSS nauka

0

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>
0

Z tego co widze to oba obiekty sa w kontenerze z animacja, wiec czemu sie dziwisz ze to tak dziala? Niech animacje ma tylko pilka

W ogole cos takiego w keyframes jak from-to a potem z pupy procenty od 20 do 80% w ogole jest poprawne?

PS Do stylowania uzywaj klas a id do "chwytania" javascriptem

0

@stivens Nie wprowadzaj w błąd, że nie używa się id w stylach, bo zaraz się dopatrzę u ciebie błędu względem użycia klas, bo pisząc bez żadnego frameworka powinno się tak pisać, że nie powinno się używać w ogóle klas i id tylko korzystać z całej gamy pozostałych selektorów.

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