Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Łączenie animacji.
Leniobitz
post
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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
werdan
post
Post #2





Grupa: Zarejestrowani
Postów: 354
Pomógł: 100
Dołączył: 14.11.2013
Skąd: Płock

Ostrzeżenie: (0%)
----- 

[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.

Ten post edytował werdan 3.12.2013, 13:24:11
Go to the top of the page
+Quote Post

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 »
 

Reply to this topicStart new topic
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

RSS Aktualny czas: 11.10.2025 - 19:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn