7월 7일 (애니메이션)

학습내용

애니메이션 : 웹사이트에서 인터랙션한 효과를 구현하고자 할 때 사용되는 css

• transform : 오브젝트의 크기를 확대, 축소, 회전, 위치 변경 할 때 사용
• transition : 오브젝트의 움직임이 변화하는 과정을 보여줄 때
• animation : 자동으로 움직이는 효과

코드

https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/ex_6.html
https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/ex_6_style.css
https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/project_animation.html
https://github.com/rona-kim/DAEGU-AI-SCHOOL/blob/main/project_animateion_style.css

• file : ex_6, project_animation

1. ex_6

transform

rotate(0deg)	scale(x,y)	skew(x,y)	translate(px,px)
2차원적인 회전, 양수 or -음수	비율로 키울 때, x y축	3차원적인 회전, x y축	선택한 오브젝트 위치 변경할 때

transition

property	duration	timing-function	delay
transition값을 줄 항목	지속시간	일정한 속도로 진행	시작 전 지연시간

animation

name	property	duration	timing-function	delay	iteration-count	direction
지정한 이름	animation값을 줄 항목	지속시간	일정한 속도로 진행	시작 전 지연시간	몇 번 반복	반복방향
		s	linear	s	infinite	normal, alternate(정방향에서 역방향 반복)

프리픽스 : 하위 브라우저까지 사용할 수 있게 하고싶을 때
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
--> 프리픽스 입력 후 기본 값은 디폴트로 입력해야함.
-webkit- : 크롬, 사파리
-moz- : 파이어폭스
-ms- : 익스플로어
-o- : 오페라

• transition, animation : 한 줄에 효과를 다 넣을 수 있다.
  앞에 나오는 초(s)는 duration, 다음 s는 delay, 하나만 있을 경우 duration
  ex ) transition : width 2s linear, height 2s linear;

• animation-direction : normal; 이 기본값이다.
  alternate은 정방향에서 역방향으로 반복, from-to (1번) to-from (1번)

• animation을 사용했을 때는 @keyframes 와 무조건 함께 해야한다.
  지정한 animation-name과 연동시켜 준 후 0%-100% 입력해준다.

• 참고사이트
  https://www.w3schools.com/
  https://jeremyckahn.github.io/stylie/

2. project_animation

1. y축으로 정렬한 메뉴 4개를 만든 후 애니메이션을 주었다.
   초기값으로 html,body 의 margin, padding 0으로 변경
   ul 라인 없애기, a 의 글자효과 없애고 색상 변경

• menu 1
• menu 2
• menu 3
• menu 4

.mouse-animation li {
width: 250px;
background-color: rgba(0, 0, 0, 1);
padding: 20px;
border-top: solid 5px #dfdfdf;
transition: opacity 0.5s, margin-left 0.5s;
}

.mouse-animation li:hover{
background-color: rgba(0, 0, 0, 0.5);
margin-left: 10px;

.mouse-animation li a {
color: blueviolet;
font-size: 20px;
}

--> opacity를 적용하면 글자를 포함해 모든 영역에서 투명도 조절이 된다.
글자까지 적용되는게 싫으면
background-color : rgba(색상)으로 변경한다.
rgba(0,0,0,1) 0,0,0 부분은 색상, 1 부분은 투명도 (0~1)

참고사이트
http://hex2rgba.devoth.com/

2. < div class="move-box">< /div>

move-box {
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;

	animation-name: movebox;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running; (running : 브라우저 접속할 때 동작 시키겠다, paused 동작 없음)
	animation-fill-mode: backwards; (0%에 입력된 값으로 사용자에게 최초로 보여주겠다.red로 설정했지만 0%에는 green으로 해놓아서 최초로 green으로 보여짐 )
}

@keyframes movebox {
	0%{	
		background-color: green;  (자연스러움을 위해 0%지점을 박스 만들었을 때 색상을 동일하게 함 )
		left: 0;
		top: 0;
	}
	25%{
		background-color: yellow;
		left: 500px;
		top: 0;
	}
	50%{
		background-color: gray;
		left: 500px;
		top: 500px;
		border-radius: 50%;
	}
	75%{
		background-color: blue;
		left: 0;
		top: 500px;
	}
	100%{
		background-color: red;
		left: 0;
		top: 0;
	}


}

• animation-fill-mode: backwards; (0%에 입력된 값으로 사용자에게 최초로 보여주겠다.red로 설정했지만 0%에는 green으로 해놓아서 최초로 green으로 출력됨)

3. < div class="outer-border">
   < div class="inner-border">< /div>
   < /div>

.outer-border {
	display: flex;
	justify-content: center;
	align-items: center;
					

	width: 200px;
	height: 200px;
	border: solid 15px red;
	border-radius: 50%;

	margin: 0 auto;
	margin-top: 200px;

	animation: outerborder 2s infinite;
}

@keyframes outerborder {
	0% {border-color: red; transform: scale(1);}
	25% {border-color: yellow; transform: scale(1.2);}
	50% {border-color: blue; transform: scale(1.3);}
	75% {border-color: green; transform: scale(1.2);}
	100% {border-color: pink; transform: scale(1);}

}

(scale은 자식에게 영향을 준다. outer에 적용한 scale값이 inner에도 적용)
.inner-border {
	box-sizing: border-box; (박스 안쪽으로 보더가 형성, 튀어나가는거 싫어!)
	width: 75px;
	height: 75px;
	border: 5px solid purple;

	animation: innerborder 2s infinite alternate;

}

@keyframes innerborder {
	0% {transform: rotate(0deg);}
	25%{ border-color: blue; border-width: 10px; }
	50%{ border-color: yellow; border-width: 20px;}
	75%{ border-color: green; border-width: 40px;}
	100%{ border-color: gray; border-width: 5px; transform: rotate(360deg);}
}

• border-width : border 굵기

참고사이트 (justify-content: center;
align-items: center;)
flexbox.help

4. 슈퍼마리오 동전
   < div class="mario-container">
   < div class="mario-coin">< /div>
   < div class="mario-box">< /div>
   < /div>

.mario-container {
	position: relative;
	width: 500px;
	height: 500px;
	border: solid 10px black;

	margin: 0 auto;
	margin-top: 200px;
}

.mario-container .mario-coin {
	position: relative;
	width: 70px;
	height: 70px;
	background-color: gold;
	border-radius: 50%;

	margin: 0 auto;
	margin-top: 100px;

	animation: jumpcoin 0.8s linear infinite ;
}

@keyframes jumpcoin {
	0%{
		transform: translateY(0px) ;
		opacity: 1;
	}
	50%{
		transform: translateY(-100px) rotateY(180deg);
		opacity: 0;
	}
	100%{
		transform: translateY(-100px) rotateY(360deg);
		opacity: 0;
	}
}

.mario-container .mario-box {
	width: 100px;
	height: 100px;
	background-color: saddlebrown;

	margin: 0 auto;

	animation: jumpbox 0.5s linear infinite alternate;
}

@keyframes jumpbox {
	0%{transform: translateY(0px);}
	50%{transform: translateY(-10px);}
	100%{transform: translateY(0px);}
}

• trnaslateY : Y축만 위치 변경할 수 있음, 위로 올라가는 효과라 -로 입력

5. 이미지
   

.hover-image {
	cursor: pointer;
    
	overflow: hidden; (image를 벗어나는 것들은 감추겠다)

	position: relative;
	width: 400px;
	border: solid 10px #000000;
}
(width 100% 값을 주면 부모 사이즈에 맞게 됨, img는 태생적으로 하단에 공백이 있는데 없애주려면 vertical-align: middle; )
.hover-image img {

	width: 100%;
	vertical-align: middle;
}

.hover-image:hover img {
	transform: scale(1.3);
	transition: transform 0.3s linear;
}

.hover-image .image-info{
	box-sizing: border-box;
	position: absolute; (부모가 3차원적이면 자식을 3차원으로 적용했을 때 width값을 부모 기준으로 설정 가능 left,bottom 사용하게되면 부모를 기준으로 형성!!!.hover-image를 기준으로 형성
	width: 100%;

	background-color: rgba(0,0,0,0.5);
	padding: 20px;

	left: 0; (부모 기준으로 )
	bottom: -85px; (최초 위치를 -85x로 안보이게 한 후 hover, 0을 주면 다시 나타난다)

	transition: bottom 0.3s linear ; (자연스러운 효과를 위해)

}

.hover-image:hover .image-info {
	bottom: 0;
}

.hover-image .image-info h2,
.hover-image .image-info p {
	margin: 0;
	padding: 0;
	color: #ffffff;
}

.hover-image .image-info h2{
	font-size: 20px;
}
.hover-image .image-info p{
	font-size: 15px;
}

• box-sizing: border-box -> 컨텐츠 크기가 border값까지 포함된 값
• 부모가 3차원적이면 자식을 3차원으로 적용했을 때 width값을 부모 기준으로 설정 가능 left,bottom 사용하게되면 부모를 기준으로 형성
• cursor: pointer; -> 커서를 올렸을 때 손가락 모양으로 변경

어려웠던 내용

transform은 이해를 했지만 transition부터 속성값들이 조금 헷갈렸다.
중간중간 position에 대한 복습도 해주셨는데 호다닥 찾아보느라 오늘은 좀 오래걸렸다.

해결방법

table을 활용해 표를 만들어서 알아보기 쉽게 만들었다.
position부분도 다시 복습해야겠다.

학습소감

같은 css이긴 하지만 움직이는 애니메이션을 실습을 하니 재미있었다.
시각적으로 즐거웠다. 그치만 머릿속에 넣어야할게 또 늘어났다고 생각하니
흐린 눈을 하게 된다. 내 흔들리는 동공..언제쯤이면 또렷해질까