본문 바로가기

Python_WEB/HTML

HTML5 - 190622 Basic Study 48(Animation Box - 연습문제)

반응형

1. 사전조건

  • 너비 100px / 높이 100px / 색상 orange
  • box1 위치 : position:relative / top 50px / left 0px
  • box2 위치 : position:relative / top 50px / left 200px
  • box1 0% 키프레임 : left 0px / 색상 orange
  • box1 50% 키프레임 : top 100px / left 0px / 색상 blue / 180도 회전
  • box1 100% 키프레임 : left 200px / 색상 orange / 360도 회전
  • box2 0% 키프레임 :  left 200px / 색상 orange
  • box2 50% 키프레임 : top 100px / left 100px / 색상 blue / 180도 회전
  • box3 100% 키프레임 : left 0px / 색상 orange / 360도 회전
  • 애니메이션 실행 시간 : 3s
  • 애니메이션이 시작되기 전 대기 시간 : 0.5s
  • 애니메이션 반복 횟수 : infinite
  • 키 프레임의 연결 방향 : alternate

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>애니메이션 연습문제</title>
<link href="css/ex04.css" rel="stylesheet">
</head>

<body>
<div id="aaa">box1</div>
<div id="bbb">box2</div>

</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */

*{
	margin:0 auto;
	padding:0;
}

/* 1. 너비 100px 높이 100px 의 orange 박스 2개 생성 */
#aaa,#bbb{
	width:100px;
	height:100px;
	background:orange;
	position:relative;
}

/* 2. 위치에 대하여 각각 position:relative;top50px;left0px;position:realative;top50px;left:20px
지정한다. */
#aaa{
	left:0px;
	top:50px;
}
#bbb{
	left:200px;
	top:50px;
}

/* 3. 첫번 째 키 프레임 조건 */
/* 0% 박스위치 left 0px 박스 색상 orange
50% 박스위치 top 100px 박스 색상 blue 180도 회전
100% 박스위치 left 200px, 박스 색상 orange 360도 회전 */
@keyframes aaa{
	0{
		left:0;
		background-color:orange;
			}
	50%{
		top:100px;
		left:0px;
		background-color:blue;
		transform:rotate(180deg);		
	}
	100%{
		left:200px;
		background-color:orange;
		transform:rotate(360deg);
	}
}

/* 4. 두번 째 키 프레임 조건 */
/* 0% 박스위치 left 200px 박스 색상 orange
50% 박스위치 top 100px left 100px 박스 색상 blue 180도 회전
100% 박스위치 left 0px 박스 색상 orange 360도 회전 */
@keyframes bbb{
	0{
		left:200px;
		background-color:orange;
			}
	50%{
		top:100px;
		left:100px;
		background-color:blue;
		transform:rotate(180deg);		
	}
	100%{
		left:200px;
		background-color:orange;
		transform:rotate(360deg);
	}
}

#aaa{
	animation-name:aaa;
}
#bbb{
	animation-name:bbb;
}

/* 5. 지정 조건
실행시간 3s 대기시간 0.5s 반복 회수 infinite 연결방향 alternate */
#aaa, #bbb{
	animation-duration:3s;
	animation-delay:0.5s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}

#aaa:hover, #bbb:hover{
	/* 중지 */
	animation-play-state:paused;
}

 

4. HTML / CSS 파일

ex04.html
0.00MB
ex04.css
0.00MB

반응형