Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Łączenie animacji.
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Leniobitz
3.12.2013, 01:12:16
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.
werdan
3.12.2013, 07:01:07
Najszybciej to chyba ustawic odpowiedni transition-delay. Mozesz tez zapoznac sie z transitionend

http://stackoverflow.com/questions/2087510...-css-transition
Leniobitz
3.12.2013, 10:07:00
Właśnie nie chodzi mi o jakis skrypt JS, chodzi mi o czysty CSS3 i wyjasnienie dlaczego ta druga animacja nie odpala sie po zakonczeniu poprzedniej.
werdan
3.12.2013, 10:35:19
Daj jakiś kod. Tak to cięzko biggrin.gif
Leniobitz
3.12.2013, 11:54:46 
[HTML] pobierz, plaintext 
  1. <html>
  2. <header>
  3. 	<link rel="Stylesheet" type="text/css" href="css/style.css" />	
  4. </header>
  5. <body>
  6. 	<div class="container">
  7. 		<div class="step_one">
  8. 			<div class="test"></div>
  9. 		</div>
  10. 	</div>
  11. </body>
  12. </html
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. .test
  2. 		{
  3. 			width: 100px;
  4. 			height: 100px;
  5. 			background: 86c31c;
  6. 			z-index: 2;
  7. 			float: left;
  8. 			margin:auto;
  9. 			margin-top: 100px;
  10. 			animation-name: test;
  11. 			animation-duration: 3s;
  12. 			animation-delay:300ms;
  13. 			animation-iteration-count:1;
  14. 			animation-timing-function:ease-in-out;
  15. 			animation-fill-mode:forwards;
  16.  
  17. 			-webkit-animation-name: test,testowy,testt;
  18. 			-webkit-animation-duration: 0.5s,3s,1s;
  19. 			-webkit-animation-delay:300ms,2s,10s;
  20. 			-webkit-animation-iteration-count:1,1,1;
  21. 			-webkit-animation-timing-function:ease-in-out;
  22. 			-webkit-animation-fill-mode:forwards;
  23.  
  24. 		}
  25. 		@keyframes test
  26.      	{
  27. 	        0% { transform:translate(0,0); }
  28. 	        100% { transform:translate(-150%,-150%); }
  29.      	}
  30.  
  31. 		@-webkit-keyframes test
  32. 		{
  33. 			0% { -webkit-transform:translate(0,0); }
  34.        		100% { -webkit-transform:translate(-200%,-200%); }
  35. 		}
  36. 		@keyframes testowy
  37. 		{
  38. 			0% { background: yellow}
  39.        		100% {background: black; }
  40. 		}
  41. 		@-webkit-keyframes testowy
  42. 		{
  43. 			0% { background: yellow}
  44.        		100% {background: black; }
  45. 		}
  46. 		@keyframes testt
  47.      	{
  48. 	        0% { transform:translate(-150%,-150%); }
  49. 	        100% { transform:translate(340%,-150%); }
  50.      	}
  51.  
  52. 		@-webkit-keyframes testt
  53. 		{
  54. 			0% { -webkit-transform:translate(-150%,-150%); }
  55.        		100% { -webkit-transform:translate(340%,-200%); }
  56. 		}
[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"
werdan
3.12.2013, 13:22:38 
[HTML] pobierz, plaintext 
  1. <html>
  2. <header>
  3. 	<link rel="Stylesheet" type="text/css" href="css/style.css" />	
  4. 	<style>
  5. 	.test
  6. 		{
  7. 			width: 100px;
  8. 			height: 100px;
  9. 			background: #86c31c;
  10. 			z-index: 2;
  11. 			float: left;
  12. 			margin:auto;
  13. 			margin-top: 300px;
  14. 			margin-left:500px;
  15.  
  16.  
  17. 			-webkit-animation-name: test,testowy,testt;
  18. 			-webkit-animation-duration: 2s,2s,3s;
  19. 			-webkit-animation-delay:0s,2s,4s;
  20. 			-webkit-animation-iteration-count:1,1,1;
  21. 			-webkit-animation-timing-function:ease-in-out;
  22. 			-webkit-animation-fill-mode:forwards;
  23.  
  24. 		}
  25.  
  26.  
  27. 		@-webkit-keyframes test
  28. 		{
  29. 			0% { -webkit-transform:translate(-100%,-100%); }
  30.        		100% { -webkit-transform:translate(-200%,-200%); }
  31. 		}
  32.  
  33. 		@-webkit-keyframes testowy
  34. 		{
  35. 			0% {background: #86c31c;}
  36.        		100% {background: black;}
  37. 		}
  38.  
  39.  
  40. 		@-webkit-keyframes testt
  41. 		{
  42. 			0% { -webkit-transform:translate(-200%,-200%); }
  43.        		100% { -webkit-transform:translate(340%,-200%); }
  44. 		}
  45. 	</style>
  46. </header>
  47. <body>
  48. 	<div class="container">
  49. 		<div class="step_one">
  50. 			<div class="test"></div>
  51. 		</div>
  52. 	</div>
  53. </body>
  54. </html
[HTML] pobierz, plaintext


Przykład ponizej.

http://jsfiddle.net/qvVam/

Wersja tylko dla webkita!


Wartosci poczatkowe kolejnych animacji musza byc takie same jako końcowe wczesniejszych.
lukasz1985
4.12.2013, 11:55:03
Nie wiem po co zadawać sobie ból tymi przejściami w CSS3 który w obecnej fazie rozwoju wygląda tragicznie i nie jest obsługiwany przez wszystkie przeglądarki. Lepiej, póki co napisać kilka linii w JS i mieć pewność, że efekt będzie taki sam, a i kod nie będzie wyglądał kretyńsko.
Leniobitz
5.12.2013, 02:09:31
Werdan, wielkie dzieki. Zastanawia mnie tylko, jak zrobic, zeby miedzy animacjami byla przerwa, ale mimo to wszystkie zostaly wykonane - jedyne co przychodzi mi do glowy, to danie dla 0% takich parametrow jak dla 100% poprzedniej animacji a dopiero po ilus procentach czasu rozpoczecie wlasciwej animacji.
Lukasz1985 - pewnie ze mozna uzyc latwiejszych sposob, ja jednak postawilem sobie takie rozwiazanie za cel, pozwala mi to dzieki temu lepiej zrozumiec CSS3.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.