CSS 애니메이션(@keyframes)으로 요소 움직이기

안녕하세요.이코노트허브 입니다.

오늘은 지난 글에서 쓴 transition은 "상태가 바뀔 때" 부드럽게 변하는 효과였습니다. 예를 들어 다크모드 버튼을 눌렀을 때처럼요. 하지만 버튼을 누르지 않아도 저절로 움직이거나, 여러 단계를 거쳐 복잡하게 움직이는 효과를 만들고 싶다면 @keyframes 애니메이션이 필요합니다. 저도 이 효과를 써보았을때 너무 신기했어요.

[transition과 animation, 뭐가 다를까요?]

transition: A 상태에서 B 상태로, 딱 한 번 부드럽게 전환. 클릭이나 호버 같은 이벤트가 있어야 시작됩니다.
animation: 여러 단계를 미리 정의해서, 반복적으로 혹은 자동으로 움직이게 만듭니다. 이벤트 없이도 페이지가 열리자마자 시작될 수 있습니다.

[기본 문법: @keyframes]

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

.title {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn은 "fadeIn이라는 이름의 움직임을 정의한다"는 뜻입니다. from(시작 상태)에서 to(끝 상태)까지 어떻게 변할지 적어두고, 실제로 적용할 요소에 animation: 이름 지속시간 속도곡선; 형태로 연결합니다.

[실전 예제 1: 글 제목이 서서히 나타나기]

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-title {
  animation: fadeInUp 0.8s ease-out;
}

transform: translateY(20px)는 원래 위치보다 20px 아래에서 시작한다는 뜻입니다. 투명도(opacity)와 위치를 동시에 움직이면, 글자가 아래에서 살짝 떠오르며 나타나는 자연스러운 효과가 됩니다.

[실전 예제 2: 버튼에 마우스를 올리면 살짝 커지기]

.button {
  transition: transform 0.2s;
}

.button:hover {
  transform: scale(1.05);
}

이 예제는 사실 animation이 아니라 transition을 쓴 경우입니다. 마우스를 올렸다 뗐다 하는 것처럼 "특정 이벤트에 반응"하는 단순한 효과는 transition이 더 간단하고 가볍습니다. scale(1.05)는 원래 크기의 105%로 살짝 커진다는 뜻입니다.

[실전 예제 3: 반복되는 움직임 (로딩 아이콘)]

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-icon {
  animation: spin 1s linear infinite;
}

infinite는 애니메이션을 끝없이 반복하라는 뜻입니다. linear는 속도 변화 없이 일정한 속도로 움직인다는 의미로, 회전 애니메이션에 자연스럽게 어울립니다.

[속도 곡선(ease) 옵션 정리]

ease        /* 천천히 시작 → 빨라짐 → 천천히 끝 (기본값) */
ease-in     /* 천천히 시작 */
ease-out    /* 천천히 끝남 */
linear      /* 일정한 속도 */

페이드인처럼 "등장하는" 효과에는 ease-out이 자연스럽고, 회전처럼 "반복되는" 효과에는 linear가 어울립니다.

[초보자가 자주 하는 실수 2가지]

@keyframes 이름과 animation 속성 이름이 다른 경우: @keyframes fadeIn으로 정의해놓고 animation: fadein 1s;처럼 대소문자를 다르게 쓰면 작동하지 않습니다. 이름은 정확히 똑같아야 합니다.
애니메이션을 너무 많이, 과하게 쓰는 경우: 페이지의 모든 요소가 다 움직이면 오히려 산만하고 눈이 피로해집니다. 제목이나 버튼처럼 정말 강조하고 싶은 곳 한두 군데에만 쓰는 것을 추천합니다.

핵심 요약

transition은 이벤트에 반응하는 단순한 전환, animation은 자동으로 반복되거나 여러 단계를 거치는 움직임에 적합합니다.
@keyframes 이름 { from {...} to {...} }으로 움직임을 정의하고, animation: 이름 지속시간 속도곡선;으로 적용합니다.
infinite를 붙이면 무한 반복됩니다.
애니메이션은 정말 강조하고 싶은 요소에만 절제해서 사용하는 것이 좋습니다.

블로그 제목이나 버튼 하나에만 살짝 애니메이션을 넣어봐도, 방문자에게는 꽤 세련된 느낌을 줄 수 있습니다. 여러분의 블로그에서 어떤 요소에 움직임을 주면 좋을지 한번 떠올려보세요.