ugrás a tartalomhoz

Archívum - Május 17, 2014 - Fórum téma

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