1. transform과 변형 함수

: 요소를 이동하거나 회전, 왜곡시키는 단순한 변형

기본형 transform: 함수

.photo { transform: translate(50px, 100px); }
/* x축으로 50px, y축으로 100px 이동 */

---

1) 2차원 변형 함수

종류	설명
translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동
translateX(tx)	지정한 크기만큼 x축으로 이동
translateX(ty)	지정한 크기만큼 y축으로 이동
scale(sx, sy)	지정한 크기만큼 x축과 y축으로 확대,축소
scale(sx)	지정한 크기만큼 x축으로 확대,축소
scale(sy)	지정한 크기만큼 y축으로 확대,축소
rotate(각도)	지정한 각도만큼 회전
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡
skew(ax)	지정한 각도만큼 x축으로 왜곡
skew(ay)	지정한 각도만큼 y축으로 왜곡

---

2) 3차원 변형 함수

종류	설명
translate3d(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
translateZ(tz)	지정한 크기만큼 z축으로 이동
scale3d(sx, sy, sz)	지정한 크기만큼 x축과 y축, z축으로 확대,축소
scaleZ(sz)	지정한 크기만큼 z축으로 확대,축소
rotate(rx, ry, 각도)	지정한 각도만큼 회전
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(각도)	지정한 각도만큼 x축으로 회전
rotateY(각도)	지정한 각도만큼 y축으로 회전
rotateZ(각도)	지정한 각도만큼 z축으로 회전
perspective(길이)	입체적으로 보일 수 있도록 깊잇값을 지정

---

2. 트랜지션

: 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 시간에 따라 스타일 속성이 바뀌는 것을 말한다

---

1) 트랜지션의 속성

종류	설명
transition-property	트랜지션의 대상을 지정
transition-duration	트랜지션을 실행할 시간을 지정
transition-timing-function	트랜지션의 실행 형태 지정
transition-delay	트랜지션의 지연시간을 지정
transition	위 4개의 속성을 한꺼번에 정리

---

a. transition-property

* 트랜지션을 적용할 속성 선택
* 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야 한다

기본형 transition-property: all | none | <속성이름>

종류	설명
all	all값을 사용하거나 transition-property를 생략할 경우 요소의 모든 속성이 트랜지션 대상이 된다 <기본값>
none	트랜지션을 하는 동안 아무 속성도 바뀌지 않는다
속성이름	트랜지션 효과를 적용할 속성을 지정

  transition-property: width, height;    /* 트랜지션 대상 - 너비, 높이 */
  transition-property: all;              /* 트랜지션 대상 - 모든 속성 */
  transition-property: background-color; /* 트랜지션 대상 - 배경색 */

---

b. transition-duration

* 트랜지션 진행 시간 지정
* 시간 단위는 초(seconds) 또는 밀리초(milliseconds)
* 트랜지션이 여러 개라면 쉼표(,)로 구분해 진행 시간 지정

기본형 transition-duration: <시간>

.body {
  transition-property: width, height;    /* 트랜지션 대상 - 너비, 높이 */
  transition-duration: 2s, 1s;
/* 트랜지션 시간 - 너비는 2초동안, 높이가 1초동안 바뀜 */
}

---

c. transition-timing-function

* 트랜지션의 시작과 중간, 끝에서의 속도 지정

기본형
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

종류	설명
ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남 <기본값>
linear	시작부터 끝까지 똑같은 속도로 진행
ease-in	느리게 시작
ease-out	느리게 끝남
ease-in-out	느리게 시작하고 느리게 끝냄
cubic-bezier (n, n, n, n)	베지에서 함수를 정의해서 사용 이때 n값은 0~1 사이만 사용할 수 있음

---

d. transition-delay

* 트랜지션이 언제부터 시작될지 지연 시간 지정
* 시간 단위는 초(seconds) 또는 밀리초(milliseconds). 기본값 0

기본형 transition-delay: <시간>

---

e. transition

• 트랜지션 관련 속성을 한꺼번에 지정
• 시간 값 속성이 2개이므로, 앞에 오는 시간값은 transition-duration, 뒤에오는 시간 값은
  transition-delay 속성으로 간주
• 속성값을 작성하는 순서는 상관이 없다
  기본형 transition: <transition-property값> | <transition-duration값>
  | <transition-timing-function값> | <transition-delay값>

......
<style>
.box {
  transition: 2s ease-in;
/*
transition-property: 기본값 all
transition-duration: 2s
transition-timing-function: ease-in
transition-delay: 기본값 0
*/
}
.box:hover { /* 여기에 있는 속성이 모두 트랜지션 대상 */
  width: 200px;
  height: 200px;
  background-color: #f50;
  transform: rotate(270deg);
}
</style>
......

---

3. 애니메이션

: 트랜지션을 잘 활용해도 부드러운 애니메이션을 만들 수 있지만 애니메이션 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다

---

1) CSS 애니메이션에서 사용하는 속성

• 키프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점

종류	설명
@keyframes	애니메이션이 바뀌는 지점을 지정
animation-delay	애니메이션의 시작 시간을 지정
animation-direction	애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정
animation-duration	애니메이션의 실행 시간을 지정
animation-iteration-count	애니메이션의 반복 횟수를 지정
animation-name	@keyframes로 설정해 놓은 중간 상태를 지정
animation-timing-function	키프레임의 전환 형태를 지정
animation	animation 속성을 한꺼번에 묶어서 지정

---

	<style>
		#box1 {
			background-color: #4cff00;
			border: 1px solid transparent;
			animation-name: shape;  /* 애니메이션 지정 */ 
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
		}
		#box2 {
			background-color: #8f06b0;
			border: 1px solid transparent;
			animation-name: rotate;  /* 애니메이션 지정 */
			animation-duration: 3s;  /* 애니메이션 실행 시간 */
		}
		@keyframes shape { /* shape 애니메이션 정의 */
			from {
				border: 1px solid transparent;  /* 1px짜리 투명한 테두리 */
			}
			to {
				border: 1px solid #000;  /* 검정색 테두리 */
				border-radius: 50%;  /* 테두리를 둥글게 */
			}
		}
		@keyframes rotate {  /* rotate 애니메이션 정의 */
			from {
				transform:rotate(0deg)  /* 시작은 0도에서 */
			}
			to {
				transform: rotate(45deg);  /* 45도까지 회전 */
			}
		}
	</style>

a. @keyframes

* 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
* ‘이름’으로 애니메이션 구별

기본형
@keyframes <이름> {
<선택자> { <스타일> }
}

---

b. animation-name

* 어떤 애니메이션을 사용할지 구별
* @keyframes 속성에서 만든 애니메이션 ‘이름’을 사용

기본형 animation-name: <키프레임 이름> | none

---

c. animation-duration

* 애니메이션을 얼마 동안 재생할 것인지 설정
* 애니메이션 실행 시간 설정. 기본값 0
* 사용 가능한 값은 초(s)나 밀리초(ms)

기본형 animation-duration: <시간>

---

d. animation-direction

* 애니메이션이 끝난 후 원래 위치로 돌아가거나 반대 방향으로 실행하도록 지정

기본형 animation-direction: normal | reverse | alternate | alternate-reverse

종류	설명
normal	애니메이션을 from에서 to로 진행 <기본값>
reverse	애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행
alternate	홀수 번째는 normal로, 짝수 번째는 reverse로 진행
alternate-reverse	홀수 번째는 reverse로, 짝수 번째는 normal로 진행

---

e. animation-iteration-count

* 애니메이션 반복 횟수 지정하기

기본형 animation-iteration-count: <숫자> | infinite

종류	설명
숫자	애니메이션의 반복 횟수를 지정
infinite	애니메이션을 무한 반복

---

f. animation-timing-function

* 애니메이션 속도 곡선 지정

기본형
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

---

g. animation

* 여러 개의 애니메이션 속성을 하나의 속성으로 줄여서 사용
* 지정하지 않은 속성은 기본 값 사용
* animation-duration 속성 값은 반드시 지정해야 함

기본형 animation: <animation-name값> | <animation-duration값>
| <animation-timing-function값> | <animation-delay값>
| <animation-iteration-count값>| <animation-direction값>

<style>
.box {
  animation-name: moving;
  animation-duration: 3s;
  animation-timing-function: ease-in
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
</style>
=============================<animation>적용========================
<style>
.box { animation: moving 3s alternate infinite ease-in; }
</style>