2025-02-03T13:25:31

2025-02-03 13:25:31 +09:00
parent e7ee682f16
commit 7936270d10
21 changed files with 1896 additions and 98 deletions
--- a/docs/10_애니메이션
+++ b/docs/10_애니메이션
@@ -0,0 +1,246 @@
+# 애니메이션 및 트랜지션
+
+| 속성 | 설명 |
+|---|---|
+| 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;
+} /* 왼쪽 상단을 기준으로 원근 효과 적용! */
+```
+