ugrás a tartalomhoz

CSS3 animation több transform különböző időben

toldigabor · 2014. Május. 17. (Szo), 13.21
Van egy négyzet, amely úgy animálódik, hogy egyszerre meg is nő és forog is. Azt szeretném, hogy a két animáció szétváljon időben: először csak megnőjön (scale), majd elforduljon (rotate).

<!doctype html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	<style>
		.box1{
			width:200px;
			height:200px;
			background:rgba(255,0,0,0.5);
			position:absolute;
			top:100px;
			left:50%;
			margin-left:-100px;
		}
		
		.box2{
			width:200px;
			height:200px;
			background:rgba(0,0,255,0.5);
			position:absolute;
			top:100px;
			left:90%;
			margin-left:-100px;
		}
		
		@-webkit-keyframes movingbox{
			from{-webkit-transform: scale(1,1); -webkit-transform: rotate(0deg);}
			to{-webkit-transform: scale(1.6,1.6); -webkit-transform: rotate(360deg);}
		}
		
		.box2{
			-webkit-animation:movingbox 5s infinite;
		}
	</style>
	
	<title>CSS3 Animáció</title>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>
Hogyan kell? Előre is köszi.
‹ selected - lekérdezni, egy select list-ből melyik option-ban van a selected="selected" ? JQ - Each - táblázat kiirasa - BUG ? ›
 ■
1

RTFM?

Endyl · 2014. Május. 17. (Szo), 13.57
@keyframes, transform
@keyframes movingbox {
  0% {/* kezdeti állapot */}
  50% {/* köztes állapot (pl nagyobb, de nem forgatott) */}
  100% {/* végállapot (nagyobb és forgatott) */}
}
2

OK

toldigabor · 2014. Május. 17. (Szo), 14.29
Így módosítottam:

@-webkit-keyframes movingbox{
 0% {-webkit-transform: scale(1,1) rotate(0deg);}
 50% {-webkit-transform: scale(1.4,1.4) rotate(0deg);}
 100% {-webkit-transform: scale(1.4,1.4) rotate(360deg);}
}
És így már jó! Köszi :)