[CSS] 25. animation

in Web on CSS


animation




<!------------------ animation.html --------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation</title>
	<link rel="stylesheet" href="reset.css">
</head>
<style>
	div{
		width: 200px;
		height: 200px;
		background: pink;
		border:1px solid #000;
		animation:boxAni 3s;
		animation-fill-mode:forwards; /* 애니메이션이 끝나면 그대로 멈춤 */
		animation-iteration-count: 3; /* 반복을 정해줌 infinite:무한번 */
		animation-direction: alternate; /* 왔다갔다 하게해줌 */
		animation-delay:2s; /* 지연시간 */
		position:absolute;
	}
	@keyframes boxAni{ /*애니메이션 정의:시작점이 기준 */
		0%{left:0} /* 시작 */
		100%{left:80%;} /*종료 */
	}
</style>
<body>
	<div></div>
</body>
</html>




실행결과




newdin




/*-----------------newdin.css--------------------*/

html{height:100%;}
body{ /* bg 두개 깔 수 있다 */
	position:relative;
	width:100%;
	height:100%;
	background-image: url(bg_ground.gif),url(bg_buildings.gif);
	background-repeat:repeat-x,repeat-x;
	background-position: left 100%, left 80%;
	overflow:hidden;
}
.sun{
	position:absolute;
	width:65px;
	height:65px;
	background-image: url(main_buildings.png);
	background-position: -527px 0;
	top:50%;
	left:30%;
	animation:sunAni 3s infinite linear; /* linear 처음과 끝 같게 함 */
}
@keyframes sunAni{ /*애니메이션 정의:시작점이 기준 */
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

.bus{
	position:absolute;
	width:117px;
	height:56px;
	background-image: url(bus.png);
	top:80%;
	left:0;
	animation:busAni 10s infinite linear;
}
@keyframes busAni{ /*애니메이션 정의:시작점이 기준 */
		0%{/* 시작 */
			left:0
		} 
		49.9999%{/*종료 */left:100%; transform:rotateY(0deg)} 
		50%{/*종료 */left:100%; transform:rotateY(180deg)} 
		99.9999%{/*종료 */left:0%; transform:rotateY(180deg)}
		100%{/*종료 */left:0%; transform:rotateY(180deg)}
}
.car1{
	position:absolute;
	width:59px;
	height:37px;
	background-image: url(car.png);
	top:85%;
	left:0;
	animation:car1Ani 8s infinite linear;
}
@keyframes car1Ani{ /*애니메이션 정의:시작점이 기준 */
		0%{/* 시작 */
			left:0;
			transform:rotateY(180deg);
		} 
		49.9999%{/*종료 */
			left:100%; 
			transform:rotateY(180deg)
		} 
		50%{/*종료 */
			left:100%; 
			transform:rotateY(0deg)
		} 
		99.9999%{/*종료 */
			left:0%; 
			transform:rotateY(0deg)
		}
		100%{/*종료 */
			
		}
}
.car2{
	position:absolute;
	width:59px;
	height:37px;
	background-image: url(car.png);
	top:90%;
	left:100%;
	animation:car2Ani 6s infinite linear;
}
@keyframes car2Ani{ /*애니메이션 정의:시작점이 기준 */ 
		49.9999%{/*종료 */
			left:0; 
			transform:rotateY(0)
		} 
		50%{/*종료 */
			left:0; 
			transform:rotateY(180deg)
		} 
		99.9999%{/*종료 */
			left:100%; 
			transform:rotateY(180deg)
		}
		100%{/*종료 */
			left:100%; 
		}
}
.cloud{
	position:absolute;
	width:157px;
	height:62px;
	background: url(cloud.gif);
	animation:cloudAni 1s infinite alternate linear ;
}
@keyframes cloudAni{
	0%{
		transform:translateY(10px);
	}
	100%{
		transform:translateY(-10px);
	}
}
.cloud1{
	top:200px;
	left:400px;
	animation-delay:1.2s;
}
.cloud2{
	top:400px;
	left:800px;
	animation-delay:1.5s;
}

.cloud3{
	top:300px;
	left:1200px;
	animation-delay:1.8s;
}

.cloud4{
	top:450px;
	animation-delay:2s;
}





<!-------------------- newdin.html ------------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>newdin</title>
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="newdin.css">
</head>
<body>
	<div class="sun">
	</div>
	<div class="bus">
	</div>
	<div class="car1">
	</div>
	<div class="car2">
	</div>
	<div class="cloud1 cloud">
	</div>
	<div class="cloud2 cloud">
	</div>
	<div class="cloud3 cloud">
	</div>
	<div class="cloud4 cloud">
	</div>
</body>
</html>




실행결과