1. CSS 애니메이션의 본질

1. CSS 애니메이션이란?

CSS 애니메이션(Animation) 이란,

"시간에 따라 요소의 스타일을 바꾸는 것" 이다.

즉, 요소를 움직이게 하거나 크기를 바꾸고, 색깔을 바꾸는 등의 동작을 자동으로 부드럽게 만들어주는 도구이다.

2. 왜 animation이 필요할까?

JavaScript로도 가능하잖아?	그런데 왜 CSS 애니메이션을 쓸까?
맞아. JavaScript로도 가능해.	하지만 CSS는 간단하고 가볍게 쓸 수 있어.
JavaScript는 복잡한 코드 필요	CSS는 @keyframes + animation만 쓰면 돼
성능도 중요함	CSS 애니메이션은 GPU 가속이 더 잘 돼서 성능이 좋아

👉 스타일 변경 중심이면 CSS 애니메이션!

👉 사용자 상호작용/복잡한 로직이 필요하면 JavaScript!

3. CSS 애니메이션이 작동하는 원리

1. 애니메이션의 단계(keyframes)를 정의함

@keyframes myAnimation {
    from { opacity: 0 }
    to { opacity: 1 }
}

2. 애니메이션을 요소에 적용함

.box {
    animation-name: myAnimation;
    animation-duration: 2s;
}

3. 브라우저가 이걸 해석해서 시간에 따라 스타일을 자동으로 변화시킴

---

4. CSS 애니메이션 vs 트랜지션

비교 항목	animation	transition
설정 방식	@keyframes로 여러 단계 설정	시작과 끝 스타일만 지정
반복 가능 여부	infinite, alternate 등 가능	반복은 안 됨
복잡한 동작 가능	O (예: 흔들기, 회전 등)	제한적
예시	로딩 스피너, 입장 효과 등	버튼 호버 효과 등

5. 시각 예제: opacity 애니메이션

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

.box {
  width: 100px;
  height: 100px;
  background: pink;
  animation: fadeIn 2s ease-in-out forwards;
}
</style>

<div class="box"></div>

👉 결과: 박스가 천천히 나타나는 느낌