# 애니메이션 및 트랜지션

| 속성 | 설명 |
|---|---|
| transition |  |
| animation |  |
| transform |  |
| transform-style |  |
| perspective |  |
| perspective-origin |  |

## 트랜지션(Transition)
트랜지션은 상태가 변화할 때 애니메이션 효과를 추가하는 속성!
예를 들어, 버튼 색상이 변할 때 자연스럽게 변화하도록 설정할 수 있어.

### transition
요소의 속성이 즉시 변경되지 않고 부드럽게 전환됨
> hover, focus, active 같은 상태 변화에 자주 사용됨
```css
요소 {
  transition: 속성 지속시간 타이밍함수 지연시간;
}
```
* 속성 :	변화할 CSS 속성 (예: background-color, width, opacity)
* 지속시간 :	변화가 지속될 시간 (s, ms 단위)
* 타이밍 함수 :	변화 속도를 조절 (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier())
* 지연시간 :	효과가 시작되기까지의 대기 시간
```css
button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.5s ease-in-out;
}
button:hover {
  background-color: red;
}
/* 버튼에 마우스를 올리면 0.5초 동안 색상이 부드럽게 변함! */
```
#### transition-property
트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
#### transition-duration
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
#### transition-timing-function
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
* ease | linear | step-end | steps(4, end)
#### transition-delay
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

#### 여러 속성에 트랜지션 적용
```css
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s, height 0.5s, background-color 0.5s;
}
.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}
/* 마우스를 올리면 크기와 색상이 동시에 변화! */
```
> all을 사용하면 모든 속성에 적용 가능
> ```css
> transition: all 0.5s ease-in-out;
> ```
> 하지만 all은 성능에 영향을 줄 수 있으므로 필요한 속성만 지정하는 게 좋아!

#### cubic-bezier()로 커스텀 트랜지션 설정
```css
.box {
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
```
#### 트랜지션 완료 이벤트
```javascript
element.addEventListener('transitionend', function(event){
    console.log(event.propertyName);
    console.log(event.elapsedTime);
}, true);
```

## 애니메이션(Animation)
애니메이션은 요소의 스타일이 여러 단계로 변하면서 부드럽게 움직이는 효과를 줄 때 사용!
> 트랜지션은 한 번만 실행되지만, 애니메이션은 반복 실행 가능!

### @keyframes
애니메이션의 각 단계를 설정할 수 있음
* from, to 또는 %를 사용하여 여러 단계 지정 가능
```css
@keyframes 애니메이션이름 {
  from {
    속성: 값;
  }
  to {
    속성: 값;
  }
}
```
> from은 0%, to는 100%와 동일!

### animation
```css
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.box {
  animation: fadeIn 2s ease-in-out;
}
/* 2초 동안 투명도(opacity)가 0에서1로 변경됨! */
```

#### 여러 단계 애니메이션 설정
```css
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
.box {
  animation: slide 3s infinite;
}
/* 애니메이션이 왼쪽에서 오른쪽으로 갔다가 다시 돌아옴! */
```

#### animation-name
적용할 애니메이션 이름 
* @keyframes에서 지정
#### animation-duration 
실행 시간 
* s, ms 단위
#### animation-timing-function 
속도 곡선 
* ease, linear, ease-in, ease-out
#### animation-delay 
지연 시간 (시작 전 대기)
#### animation-iteration-count	
반복 횟수 
* infinite 사용 가능
#### animation-direction 
애니메이션 방향 
* normal :	처음부터 끝까지 정상 실행 (기본값)
* reverse :	끝에서 시작으로 거꾸로 실행
* alternate :	처음 → 끝 → 처음 반복
* alternate-reverse	 :끝 → 처음 → 끝 반복
#### animation-fill-mode
애니메이션 종료 후 상태. 시작 전/끝난 후 스타일 유지 
* none :	애니메이션 종료 후 원래 상태로 돌아감 (기본값)
* forwards :	마지막 상태를 유지
* backwards :	애니메이션 시작 전 첫 번째 프레임 유지
* both :	forwards + backwards 효과


```css
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.box {
  animation: bounce 1s infinite alternate ease-in-out;
}
```

## transform
transform 속성은 요소를 이동(translate), 회전(rotate), 확대/축소(scale), 기울이기(skew) 등의 변형을 적용하는 데 사용돼.

* translate(x, y)
* rotate(deg)
* scale(x, y)
* skew(x, y)
* rotateX(deg)
* rotateY(deg)
* rotateZ(deg)
* translate3d(x, y, z)
* scale3d(x, y, z)

### 여러 변형을 한 번에 적용 가능
```css
.box {
  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
} /* 이동 + 회전 + 확대를 한 번에 적용 가능! */
```
> 여러 개의 transform을 조합할 때는 순서가 중요해!

## transform-style
부모 요소의 3D 변환을 자식 요소에도 적용할지 결정!
> `transform-style: preserve-3d;`을 사용하면 자식 요소도 3D 공간에 배치됨.
```css
.container {
  perspective: 500px;
  transform-style: preserve-3d;
}
.box {
  transform: rotateY(45deg);
}
/* 부모 요소의 원근 효과가 자식 요소에도 적용됨! */
```
> 기본값은 flat (자식 요소는 2D로 표시됨)

## perspective
perspective 속성은 3D 효과를 만들기 위해 원근감을 설정하는 데 사용돼.
> 요소가 멀리 있으면 작아지고, 가까이 있으면 커지도록 설정 가능!

* 카메라와 요소 사이의 거리를 조절
* 값이 작을수록 원근감이 강해지고, 값이 클수록 원근감이 약해짐

```css
.container {
  perspective: 500px;
}
.box {
  transform: rotateY(45deg);
}
/* 원근감 적용 후, Y축 45도 회전! */
```

## perspective-origin
원근 효과의 기준점을 이동
* 기본값: 50% 50% (정중앙)
```css
.container {
  perspective: 600px;
  perspective-origin: left top;
} /* 왼쪽 상단을 기준으로 원근 효과 적용! */
```