[CSS] 애니메이션 속성 : direction, fill-mode

🌀 animation-direction :애니메이션 진행 방향

애니메이션이 한 방향으로만 진행될지, 반대로도 움직일지 설정하는 속성

값	설명	예시
normal	처음 → 끝으로 한 방향 진행 (기본값)	🚗💨 → → →
reverse	끝 → 처음으로 거꾸로 진행	← ← ← 🚗💨
alternate	처음 → 끝 → 다시 처음 (왕복)	🚗💨 → → → 🔄 ← ← ←
alternate-reverse	끝 → 처음 → 다시 끝 (반대 방향으로 왕복)	← ← ← 🚗💨 🔄 → → →

🎬 비유로 설명하면?

• normal → 영상 재생
• reverse → 영상 거꾸로 재생
• alternate → 영상 재생 후 다시 뒤로 감기
• alternate-reverse → 영상 거꾸로 시작 후 다시 앞으로 감기

📌 예제 코드 (alternate)

@keyframes move {
  from { transform: translateX(0px); }
  to { transform: translateX(100px); }
}

.box {
  animation: move 1s ease-in-out infinite alternate;
}

✅ 결과: → → → (앞으로) / ← ← ← (뒤로) 왕복 반복!

---

🎭 animation-fill-mode :애니메이션 전후 상태 유지 여부

애니메이션이 끝났을 때, 스타일을 유지할지 원래 상태로 돌아갈지 설정하는 속성

값	설명	예시
none	애니메이션이 끝나면 원래 상태로 돌아감 (기본값)	🎬❌ (리셋)
forwards	애니메이션이 끝난 상태를 유지	🎬⏸ (마지막 프레임 정지)
backwards	애니메이션이 시작하기 전 상태를 미리 적용	⏮🎬 (첫 프레임 정지 후 시작)
both	forwards + backwards	🎬⏯ (처음도, 끝도 유지)

🎬 비유로 설명하면?

• none → 애니메이션 끝나면 원래 자리로 돌아감 (리셋)
• forwards → 애니메이션 끝난 상태 그대로 멈춤 (마지막 장면에서 정지)
• backwards → 애니메이션 시작하기 전 상태를 미리 보여줌 (첫 장면에서 정지 후 시작)
• both → 처음과 끝 모두 유지!

📌 예제 코드 (forwards)

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

.box {
  animation: fadeOut 2s ease-in-out forwards;
}

✅ 결과: 점점 투명해지다가 완전히 사라진 상태(0%)를 유지!

---

💡 한 줄 정리

✅ animation-direction → 애니메이션이 어떻게 움직일지 (순방향, 역방향, 왕복 등)
✅ animation-fill-mode → 애니메이션이 끝나고 스타일을 유지할지, 원래대로 돌아갈지