024 CSS3 공부 (3) transition, transform, animation

Top

Daily Study/Web Dev

2021. 3. 4.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>transition</title>
	<style>
		body {
			fonot: 12px 'Malgun Gothic', sans-serif;
		}
		#wrap {
			width: 900px;
			margin: 0 auto;
		}
		.box {
			width: 100px;
			height: 100px;
			background-color: lime;
			/*transition: all 3s 1s linear;*/
			/* 적용할 속성, duration, delay, timing-function 순서*/
			/* all하면 다 3초에 걸쳐서 변화, 아래 hover에 있는 속성만 적으면 그거만 적용 */

			/*transition-property: width;*/
			/* 어떤 속성을 변화시킬건가 */
			/*transition-duration: 3s;*/
			/* 몇 초에 걸쳐서 변화시킬건가 */
			/*transition-delay: 1s;*/
			/* 실행 대기 시간 */
			/*transition-timing-function: linear;*/
			/* linear | ease | ease-in | ease-out | ease-in-out | steps(1, start) | steps(1,end) */

			/*transition:
				width 3s linear,
				height 1s 3s,
				background-color 2s 4s;*/

			/*transition: all 1s cubic-bezier(0.42, 0.0, 1.0, 1.0);*/
			transition: all 1s steps(5) ;

		}
		.box:hover {
			width: 100%;
		
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box">
			
		</div>
	</div>
</body>
</html>

호버하면 width가 100%까지 1초에 걸쳐서 5단계에 걸쳐서 transition하게 하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>transition</title>
	<style>
	#wrap {
		width: 700px;
		margin: 0 auto;
	}
	.box {
		position: relative;
		width: 700px;
		height: 500px;
		box-sizing: border-box;
		background: url(img/wendy.jpg) 0 0 / cover;
	}
	.pic1 {
		width: 700px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		transition: width 0.3s steps(5);
	}

	.box:hover .pic1 {

		width: 0px;
		background-color: rgba(255,255,255,1);
	}

	.pic2 {
		position: absolute;
		top: 100px;
		width: 700px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		transition: width 0.3s 0.3s steps(5);
	}

	.box:hover .pic2 {
		width: 0px;
		background-color: rgba(255,255,255,1);
	}

	.pic3 {
		position: absolute;
		top: 200px;
		width: 700px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		transition: width 0.3s 0.6s steps(5);
	}

	.box:hover .pic3 {
		width: 0px;
		background-color: rgba(255,255,255,1);
	}

	.pic4 {
		position: absolute;
		top: 300px;
		width: 700px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		transition: width 0.3s 0.9s steps(5);
	}

	.box:hover .pic4 {
		width: 0px;
		background-color: rgba(255,255,255,1);
	}

	.pic5 {
		position: absolute;
		top: 400px;
		width: 700px;
		height: 100px;
		background-color: rgba(255,255,255,1);
		transition: width 0.3s 1.2s steps(5);
	}

	.box:hover .pic5 {
		width: 0px;
		background-color: rgba(255,255,255,1);
	}

	</style>
</head>
<body>

	<div id="wrap">
		<div class="box">
			<div class="pic1"></div>
			<div class="pic2"></div>
			<div class="pic3"></div>
			<div class="pic4"></div>
			<div class="pic5"></div>
		</div>
	</div>
	
</body>
</html>

steps로 움직이는 transition을 보니까 갑자기 고전게임 로딩되는거처럼

삐리릭삐리릭 이미지나 텍스트가 나타나는걸 표현해보고 싶어서 한 연습

근데 한 방향 말고 왼쪽 오른쪽 왼쪽 오른쪽 주거니받거니 하게 하고 싶었는데

방법을 못찾았다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>animation</title>
	<style>
		body {
			font: 12px 'Malgun Gothic',sans-serif;
		}
		#wrap {
			margin-top: 30px;
			width: 900px;
			margin: 0 auto;
		}
		.box {
			margin-top: 100px;
			width: 100px;
			height: 100px;
			background-color: green;
			/*animation-name: ani;
			animation-duration: 3s;
			animation-delay: 1s;
			animation-fill-mode: backwards;*/
			/* 애니메이션이 끝나면 어디에 고정될지, forwards 맨앞상황, backwards 맨뒤상*/
			/*animation-direction: reverse;
			animation-timing-function: ease;
			animation-iteration-count: 5;*/

			/*animation:
				ani 3s 1s infinite alternate,
				ani2 1s 1s infinite alternate;*/
			animation: ani3 2s infinite steps(5);
		}
		.box:hover {
			animation-play-state: paused;
			/* 마우스 올렸을 떄 일시정지 */
		}

		@keyframes ani {
			0% {width: 100px;}
			100% {width: 100%;}
		}
		@keyframes ani2 {
			0% {height: 100px;}
			100% {height: 200px;}
		}
		@keyframes ani3 {
			0% {transform: rotateZ(0deg);}
			100% {transform: rotateZ(360deg);}
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box">
			
		</div>
	</div>
	
</body>
</html>

transform 적용한 애니메이션

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>animation exer</title>
	<style>
	
	body h1,h2,h3,p,em {
		margin: 0 auto;
		padding: 0;
		font: 12px 'malgun gothic',sans-serif;
		text-decoration: none;
		font-style: normal;
	}

	#wrap {
		width: 500px;
		margin: 0 auto;
		margin-top: 20px;
	}
	.pic {
		position: relative;
		width: 500px;
		height: 500px;
		background: url(img/wendy5.png);
	}

	.pic div {
		background-color: white;
	}

	.box1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani1 1s steps(15);
	}

	@keyframes ani1 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box2 {
		position: absolute;
		top: 50px;
		right: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani2 1s 1s steps(15);
	}

	@keyframes ani2 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box3 {
		position: absolute;
		top: 100px;
		left: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani3 1s 2s steps(15);
	}

	@keyframes ani3 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box4 {
		position: absolute;
		top: 150px;
		right: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani4 1s 3s steps(15);
	}
	@keyframes ani4 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box5 {
		position: absolute;
		top: 200px;
		left: 0;
		width: 500px;
		height: 50px;
	animation: forwards ani5 1s 4s steps(15);
	}
	@keyframes ani5 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box6 {
		position: absolute;
		top: 250px;
		right: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani6 1s 5s steps(15);
	}
	@keyframes ani6 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box7 {
		position: absolute;
		top: 300px;
		left: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani7 1s 6s steps(15);
	}
	@keyframes ani7 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box8 {
		position: absolute;
		top: 350px;
		right: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani8 1s 7s steps(15);
	}
	@keyframes ani8 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box9 {
		position: absolute;
		top: 400px;
		left: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani9 1s 8s steps(15);
	}
	@keyframes ani9 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.box10 {
		position: absolute;
		top: 450px;
		right: 0;
		width: 500px;
		height: 50px;
		animation: forwards ani10 1s 9s steps(15);
	}
	@keyframes ani10 {
		0%{width: 500px;}
		100%{width: 0px;}
	}

	.text {
		position: relative;
		margin-top: 20px;
		width: 500px;
		height: 150px;
		box-sizing: border-box;
		border: 5px double lightblue;
		/*border-style: double;*/
		border-radius: 10px;
	}

	.text h1 {
		padding-top: 15px;
		padding-bottom: 10px;
		font: 2em bold Baskerville,serif;
		color: rgba(0,0,255,.6);
		text-align: center;
	}

	.text h2 {
		font: 1em '바탕체',serif;
		text-align: center;
	}

	.text h3 {
		font: .8em '바탕체',serif;
		text-align: center;
		letter-spacing: -1.3px;
	}

	.text p {
		padding-top: 10px;
		text-align: center;
	}

	.textbox1 {
		position: absolute;
		top: -5px;
		left: -5px;
		width: 500px;
		height: 50px;
		background-color: white;
		animation: textani1 forwards 1s 10s steps(15);
	}

	@keyframes textani1 {
		0% {width: 500px;}
		100% {width: 0px;}
	}

	.textbox2 {
		position: absolute;
		top: 45px;
		right: -5px;
		width: 500px;
		height: 50px;
		background-color: white;
		animation: textani2 forwards 1s 11s steps(15);
	}

	@keyframes textani2 {
		0% {width: 500px;}
		100% {width: 0px;}
	}

	.textbox3 {
		position: absolute;
		top: 95px;
		left: -5px;
		width: 500px;
		height: 50px;
		background-color: white;
		animation: textani3 forwards 1s 12s steps(15);
	}

	@keyframes textani3 {
		0% {width: 500px;}
		100% {width: 0px;}
	}

	</style>
</head>
<body>
	<div id="wrap">
		<div class="pic">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>
			<div class="box7"></div>
			<div class="box8"></div>
			<div class="box9"></div>
			<div class="box10"></div>
		</div>

		<div class="text">
			<h1>Wendy</h1>
			<h2>손승완</h2>
			<h3>1994.02.21. ~</h3>
 			<p>대한민국의 가수이다. 5인조 걸그룹 <em>레드벨벳</em>의 멤버이며, 팀에서 <em>메인보컬</em>을 맡고 있다.</p>	
 			<div class="textbox1"></div>
 			<div class="textbox2"></div>
 			<div class="textbox3"></div>
		</div>
	</div>


</body>
</html>

아까 transition으로 표현하려고 했다가 실패했던걸

animation으로 일단 원하던대로는 구현했다.

근데 뭔가 이거보다 훨씬 좋은 코드가 있을 것 같긴 한데

지금 내 방식은 사진영역이랑 텍스트 영역을 깔고

위에 그 크기 흰색 영역을 세로로 잘게 쪼개고

그 옆으로 길쭉한 쪼개진 영역들이 1초씩 15단계를 거쳐서 0의 폭을 갖도록 애니메이션을 만든건데

이러면 일단 사진 부분에만 div가 10개 생기고...

애니메이션도 다 따로 적용시켜야한다.

height 값도 손봐야하나 싶기도 하다.

근데 아직까진 머리가 잘 안굴러가서 어떻게 해야될지 잘 모르겠다.

걍 저 부분만 덮는거보다 어차피 나중에 일괄로 적용하려면

전체 페이지에 걸쳐서 저 효과가 적용되게 하는게 맞는 것 같기도 하다.

실제로 고전게임 로딩도 그 부분만 되는게 아니고

왼쪽 끝부터 오른쪽 끝까지 쭉 위에서 아래로 훑기 때문에

나중에 페이지에 올릴 거 다 올려놓고

창 전체를 덮는 박스들을 만들어서 저렇게 애니메이션을 넣으면 될 것 같기도 하다.

물론 창 덮는 애니메이션은 그냥 공통이니까

복사해서 하든 아니면 여러 태그 걸어서 하든 상관없지 않을까 싶다.

요전에 블렌더로 맥그로우 만들었을 때처럼

주어진 예제만 하는게 아니고 직접 만들고 생각하려니까 확실히 어려운 것 같지만

배웠던 것들을 실제로 적용하는 데에는 훨씬 도움되는 것 같다.

앞으론 애니메이션이 들어간 웹이 많이 나올테니까

gif 위주로 올려야겠다.

저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

026 media query 반응형 웹, 반응형 웹페이지 예제 실습 (0)	2021.03.09
025 CSS3 공부 (4) transform, filter (0)	2021.03.05
023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex (0)	2021.03.02
022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정 (0)	2021.02.25
021 웹페이지 만들어보기 실습 (0)	2021.02.23