CSS 애니메이션 (@keyframes)

🎬 2단계: 웹 페이지에 생명 불어넣기

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%로 역재생하며 부드럽게 돌아옵니다.

<div style="text-align: center; margin-bottom: 10px; color: #64748b; font-weight: bold;"> 👇 실무에서 가장 많이 쓰는 3가지 애니메이션 </div> <div class="anim-container"> <div class="heart" title="심장 박동 (scale)"></div> <div class="spinner" title="로딩 스피너 (linear 회전)"></div> <div class="float-box" title="공중 부양 (alternate 왕복)">둥둥~</div> </div>