Łączenie animacji. - Forum PHP.pl

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Łączenie animacji.

Leniobitz Zobacz profil	3.12.2013, 01:12:16 Post #1
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 1.08.2013 Ostrzeżenie: (0%)	Witam, mam następujący problem. Generalnie chciałbym stworzyć stronę na której wykonywana jest jakas animacja, po niej, w odstepie czasu, kolejna. Problem polega na tym, ze jezeli animacja druga ma zostac wykonana po zakonczeniu pierwszej nic sie nie dzieje, nawet jezeli jest to 1 sekundowa przerwa. Jezeli wlacze ja w trakcie pierwszej, problem znika. W jaki sposob moge zainicjowac druga animacje po zakonczeniu pierwszej? Pozdrawiam. P.S. Na razie nie jestem zainteresowany zadnymi rozwiazaniami zwiazanymi z SVG, chodzi mi o czysty CSS3.

Odpowiedzi

Leniobitz Zobacz profil	3.12.2013, 11:54:46 Post #2
Grupa: Zarejestrowani Postów: 27 Pomógł: 0 Dołączył: 1.08.2013 Ostrzeżenie: (0%)	[HTML] pobierz, plaintext <html> <header> <link rel="Stylesheet" type="text/css" href="css/style.css" /> </header> <body> <div class="container"> <div class="step_one"> <div class="test"></div> </div> </div> </body> </html [HTML] pobierz, plaintext [CSS] pobierz, plaintext .test { width: 100px; height: 100px; background: 86c31c; z-index: 2; float: left; margin:auto; margin-top: 100px; animation-name: test; animation-duration: 3s; animation-delay:300ms; animation-iteration-count:1; animation-timing-function:ease-in-out; animation-fill-mode:forwards; -webkit-animation-name: test,testowy,testt; -webkit-animation-duration: 0.5s,3s,1s; -webkit-animation-delay:300ms,2s,10s; -webkit-animation-iteration-count:1,1,1; -webkit-animation-timing-function:ease-in-out; -webkit-animation-fill-mode:forwards; } @keyframes test { 0% { transform:translate(0,0); } 100% { transform:translate(-150%,-150%); } } @-webkit-keyframes test { 0% { -webkit-transform:translate(0,0); } 100% { -webkit-transform:translate(-200%,-200%); } } @keyframes testowy { 0% { background: yellow} 100% {background: black; } } @-webkit-keyframes testowy { 0% { background: yellow} 100% {background: black; } } @keyframes testt { 0% { transform:translate(-150%,-150%); } 100% { transform:translate(340%,-150%); } } @-webkit-keyframes testt { 0% { -webkit-transform:translate(-150%,-150%); } 100% { -webkit-transform:translate(340%,-200%); } } [CSS] pobierz, plaintext teraz niby wszystkie animacje sa wykonywane, ale "testowy" i "testt" wykonywane sa jednoczesnie, mimo ze powinno być opoznienie. Dodatkowo animacja testt zaczyna sie w innym punkcie niz skonczyla sie animacja "test" Ten post edytował Leniobitz 3.12.2013, 11:58:20

Posty w temacie

Leniobitz Łączenie animacji. 3.12.2013, 01:12:16

werdan Najszybciej to chyba ustawic odpowiedni transition... 3.12.2013, 07:01:07

Leniobitz Właśnie nie chodzi mi o jakis skrypt JS, chodzi mi... 3.12.2013, 10:07:00

werdan Daj jakiś kod. Tak to cięzko 3.12.2013, 10:35:19

Leniobitz [HTML] pobierz, plaintext <html><header... 3.12.2013, 11:54:46

werdan [HTML] pobierz, plaintext <html><header... 3.12.2013, 13:22:38

lukasz1985 Nie wiem po co zadawać sobie ból tymi przejściami ... 4.12.2013, 11:55:03

Leniobitz Werdan, wielkie dzieki. Zastanawia mnie tylko, jak... 5.12.2013, 02:09:31

« Następny starszy · CSS · Następny nowszy »

2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)

0 Zarejestrowanych:

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

Aktualny czas: 6.10.2025 - 22:50

Hosting zapewnia