Day 44 : CSS3 스타일로 태그에 동적 변화 만들기

pancakemaker 2021. 12. 17. 12:18

1. 애니메이션

① 시간별 애니메이션 장면 작성 : @keyframes

@keyframes name {
	시간비율 { 스타일; 스타일; } /* 시간비율 시점까지 적용할 스타일 시트 작성 */
    	...
    	시간비율 { 스타일; 스타일; } /* 이전 시점에서 시간비율 시점까지 적용할 스타일 시트 작성 */
}

@keyframes textColorAnimation {
	0% { color : blue; } /* 시작 시. 0% 대신 from 사용 가능 */
   	30% { color : green; } /* 30% 경과시 까지 */
	100% { color : red; } /* 끝까지. 100% 대신 to 사용 가능 */
}

② 애니메이션 스타일 시트 작성

span {
	animation-name : 애니메이션 이름; /* @keyframes의 name */
	animation-duration : 시간; /* 1회 애니메이션 시간 */
	animation-iteration-count : 애니메이션 반복 횟수; /* 숫자로 지정 가능. infinite:무한반복 */
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>애니메이션</title>
	<style>
		@keyframes bomb {
			from { /* 0% 로 수정 가능 */
				font-size: 500%;
			}
			to { /* 100% 로 수정 가능 */
				font-size: 100%;
			}
		}
		h3 {
			animation-name: bomb;
			animation-duration: 3s;
			animation-iteration-count: infinite;
		}
	</style>
</head>
<body>
	<h3>꽝!</h3>
	<hr>
	<p>꽝! 글자가 3초동안 500%에서 시작하여 100%로 바뀌는 애니메이션입니다.
		무한 반복합니다.</p>
</body>
</html>

2. 전환

: HTML 태그에 적용된 CSS3 프로퍼티 값이 변할 때, 값의 변화를 서서히 진행시켜 애니메이션 효과를 냄

: 1회만 적용

① 전환 프로퍼티와 전환 시간 지정 : transition

transition : 전환프로퍼티 전환시간

- 전환프로퍼티 : 이 프로퍼티의 값이 변경되면 현재 값에서 새 값으로 전환효과 시작
- 전환시간 : 현재 값에서 새 값으로 전환하는데 걸리는 시간

span {
	transition : font-size 5s;
}

② 전환 효과 시작

span:hover {
	font-size: 500%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>전환</title>
	<style type="text/css">
		span { 
			transition: font-size 5s;
		}
		span:hover {
			font-size: 500%;
		}
	</style>
</head>
<body>
	<h3>font-size에 대한 전환</h3>
	<hr>
	<p><span>꽝!</span> 글자에 마우스를 올려보세요.</p>
</body>
</html>

3. 변환

: 회전, 확대 등 다양한 기하학적 모양으로 출력

① 변환 프로퍼티 : transform

div {
	transform : rotate(20deg); /* <div> 태그를 시계 방향으로 20도 회전시킨 모양으로 변환 */
}

② 다중 변환

div {
	transform : rotate(20deg) scale(3,1);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>다양한 변환 사례</title>
	<style>
		div {
			display: inline-block;
			padding: 5px;
			color: white;
			background: olivedrab;
		}
		/* 변환 */
		div#rotate { transform: rotate(20deg); }
		div#skew { transform: skew(0deg, -20deg); }
		div#translate { transform: translateY(100px); }
		div#scale { transform: scale(3,1); }

		/* 마우스를 올릴 때 추가 변환 */
		div#rotate:hover { transform: rotate(80deg); }
		div#skew:hover { transform: skew(0deg, -60deg); }
		div#translate:hover { transform: translate(50px, 100px); }
		div#scale:hover { transform: scale(4,2); }

		/* 마우스 누를 때 추가 변환 */
		div#scale:active { transform: scale(1,5); }
	</style>
</head>
<body>
	<h3>다양한 Transform</h3>
	아래는 회전(rotate), 기울임(skew), 이동(translate), 확대/축소(scale)가 적용된 사례이다.
	또한 마우스를 올리면 추가적 변환이 일어난다.
	<hr>
	<div id="rotate">rotate 20 deg</div>
	<div id="skew">skew(0,-20deg)</div>
	<div id="translate">translateY(100px)</div>
	<div id="scale">scale(3,1)</div>
</body>
</html>