CSS - nauka animacje

Elzulninho · 17 Marca 2018

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. Jak zrobić by sama piłka się ruszała a kwadrat był w miejscu gdzieś po lewej stronie po środku ekranu.Oto mój 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>

Matt91111 · 17 Marca 2018

Wystarczy sformatować kod i wszystko widać

   <body>
       <div id="trawnik"></div>
       <div id="scena">
	<div id="przemieszczenie">
		<div id="piłka"></div>
		<div id="kwadrat"></div>
	</div>
</div>
   </body>

Kwadra jak i piłka znajdują się w "przemieszczeniu" a ty animujesz cały ten element. Musisz zrobić osobną animacje dla kwadratu i osobną dla koła. A jak chcesz animować kwadrat to pionowo to zamiast "left" należy użyć "top".

Elzulninho · 17 Marca 2018

Zrobiłem żeby po kółko się zatrzymywało w pewnym momencie i chciałbym żeby się odbiło teraz i gdzieś poleciało, to w tej samej animacji po prostu dalej dorobić czy jakąś nową muszę zrobić?

Matt91111 · 18 Marca 2018

Zrobiłem żeby po kółko się zatrzymywało w pewnym momencie i chciałbym żeby się odbiło teraz i gdzieś poleciało, to w tej samej animacji po prostu dalej dorobić czy jakąś nową muszę zrobić?

Nie wiem czy w CSS można takie rzeczy zrobić, można by było zdefiniować kilka keyframow a później przy użyciu javascriptu je kontrolować.

Obsługa zdarzeń animacji

Kontrolowanie stanu animacji

A nazwę animacji też można inną wrzucić:

var element = document.getElementById("{id_elementu}");
element.style.animationName = "{nazwa_animacji}"

Zaloguj się

Temat został przeniesiony do archiwum

CSS - nauka animacje

Rekomendowane odpowiedzi

Elzulninho 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Matt91111 5

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Elzulninho 0

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Matt91111 5

Udostępnij tę odpowiedź

Odnośnik do odpowiedzi

Udostępnij na innych stronach

Ostatnio przeglądający 0 użytkowników

Tematy

Odpowiedzi

Aktywni użytkownicy

Przeglądaj

Aktywność