@keyframes 애니메이션

transition이 마우스를 올릴 때처럼 'A 상태에서 B 상태로 한 번만 넘어가는 효과'라면,
@keyframes와 animation 속성은 마우스를 올리지 않아도 스스로 움직이고 무한히 반복되는 진짜 애니메이션을 만듭니다.

속성 / 문법	설명 및 예시
@keyframes 이름	애니메이션의 뼈대(대본)를 작성합니다. `0%`(시작)부터 `100%`(끝)까지 자유롭게 설정합니다.
animation-duration	한 번 재생되는데 걸리는 시간입니다. (예: `2s`)
animation-timing-function	🔥 핵심: 가속도 그래프입니다. - `ease`: 부드럽게 시작/종료 (자연스러움) - `linear`: 처음부터 끝까지 똑같은 속도 (스피너에 필수!)
animation-iteration-count	반복 횟수입니다. 영원히 움직이게 하려면 `infinite`를 적습니다.
animation-direction	🔥 핵심: 재생 방향입니다. - `alternate`: 0% ➡ 100% 진행 후, 100% ➡ 0%로 역재생하며 부드럽게 돌아옵니다.