2. animation 속성 하나씩 완전 정복하기

🧱 animation 속성 전체 구조

animation:
  name               → 어떤 애니메이션 쓸 건지
  duration           → 몇 초 동안 할 건지
  timing-function    → 속도가 어떻게 변할 건지
  delay              → 언제 시작할 건지
  iteration-count    → 몇 번 반복할 건지
  direction          → 방향은 어떻게 될 건지
  fill-mode          → 끝나고도 스타일 유지할 건지
  play-state         → 재생할지 멈출지

---

🔍 Step 1: animation-name

✅ 개념

@keyframes로 만든 애니메이션의 이름을 지정

🧠 예제

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation-name: fadeIn;
}

---

🔍 Step 2: animation-duration

✅ 개념

애니메이션이 한 번 완전히 실행되는 데 걸리는 시간

💡 단위

• s → 초 (2s = 2초)
• ms → 밀리초 (500ms = 0.5초)

🧠 예제

.box {
  animation-name: fadeIn;
  animation-duration: 1.5s;
}

---

🔍 Step 3: animation-timing-function

✅ 개념

애니메이션의 속도 곡선 (느려졌다 빨라졌다 같은)

💡 대표 값

값	설명
linear	일정한 속도
ease	느리게 시작 → 빠름 → 느리게 끝
ease-in	느리게 시작
ease-out	느리게 끝남
ease-in-out	양쪽 다 부드럽게

🧠 예제

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

---

🔍 Step 4: animation-delay

✅ 개념

애니메이션이 얼마 후에 시작될지 지정

🧠 예제

.box {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 2s; /* 2초 뒤에 시작 */
}

---

🔍 Step 5: animation-iteration-count

✅ 개념

애니메이션을 몇 번 반복할지 정함

💡 값

• 숫자 (1, 2, 3 등)
• infinite → 무한 반복

🧠 예제

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

---

🔍 Step 6: animation-direction

✅ 개념

애니메이션 반복 시 방향을 바꿀지 말지

값	설명
normal	항상 처음부터 끝까지
reverse	항상 끝부터 시작으로
alternate	왔다갔다 (정방향 → 역방향)
alternate-reverse	반대로 왔다갔다 (역방향 → 정방향)

🧠 예제

.box {
  animation: fadeIn 2s ease-in-out infinite alternate;
}

---

🔍 Step 7: animation-fill-mode

✅ 개념

애니메이션 시작 전/끝난 후의 스타일을 유지할지

값	설명
none	애니메이션 외 상태 유지 (기본값)
forwards	끝난 후 마지막 상태 유지
backwards	시작 전 첫 상태 미리 적용
both	둘 다 적용

🧠 예제

.box {
  animation: fadeIn 2s ease forwards;
}

→ 이걸 쓰지 않으면, opacity는 1이 되었다가 다시 0으로 돌아가 😅

---

🔍 Step 8: animation-play-state

✅ 개념

애니메이션을 재생할지, 일시정지할지

값	설명
running	실행 중
paused	멈춘 상태 (hover 시 일시정지 등 구현 가능)

🧠 예제

.box {
  animation-play-state: paused;
}
.box:hover {
  animation-play-state: running;
}

---

✅ 요약 표 (정리용)

속성	설명	자주 쓰는 값
animation-name	애니메이션 이름	myAnimation
animation-duration	실행 시간	2s, 500ms
animation-timing-function	속도 곡선	linear, ease-in-out
animation-delay	시작 지연	0s, 1s
animation-iteration-count	반복 횟수	1, infinite
animation-direction	방향	normal, alternate
animation-fill-mode	끝난 후 상태 유지	none, forwards
animation-play-state	재생 상태	running, paused

---