전환과 애니메이션

🎯 학습 목표

이 강을 마치면 여러분은 웹 페이지에 부드러운 움직임과 생동감을 더할 수 있게 됩니다. 버튼에 마우스를 올리면 살짝 커지거나, 요소가 스르륵 나타나는 효과는 페이지를 훨씬 세련되고 살아 있게 만듭니다. 이번 강에서는 이런 움직임을 만드는 CSS의 세 가지 도구를 배웁니다.

구체적으로는 세 가지를 배웁니다. 첫째, 상태 변화를 매끄럽게 잇는 transition을 익힙니다. 둘째, 요소를 이동·확대·회전하는 transform을 살펴봅니다. 셋째, 복잡한 움직임을 만드는 keyframes 애니메이션의 기초를 파악합니다.

🖱️ 준비물 — :hover로 상태 만들기

이 섹션에서는 움직임을 촉발하는 계기인 :hover를 먼저 살펴보겠습니다.

움직임은 보통 어떤 변화가 일어날 때 나타납니다. 그 변화를 만드는 대표적인 방법이 :hover입니다. :hover는 마우스를 요소 위에 올렸을 때의 상태를 가리키는 특별한 선택자입니다.

.button {
  background-color: blue;
}
.button:hover {
  background-color: darkblue;
}

이 코드는 버튼이 평소에는 파란색이다가, 마우스를 올리면 진한 파랑으로 바뀌게 합니다. .button:hover는 '버튼에 마우스를 올린 상태'를 뜻하는 것입니다. 그런데 이대로면 색이 딱 하고 순간적으로 바뀝니다. 이 변화를 부드럽게 만드는 것이 다음에 배울 transition입니다.

🌊 부드러운 변화 — transition

이 섹션에서는 상태 변화를 매끄럽게 잇는 transition을 살펴보겠습니다.

transition은 어떤 속성이 바뀔 때, 그 변화를 정해진 시간 동안 서서히 일어나게 합니다. 즉 색이 순간적으로 바뀌는 대신, 부드럽게 스며들듯 바뀌게 하는 것입니다. 사용법은 평소 상태에 transition을 적어 주는 것입니다.

.button {
  background-color: blue;
  transition: background-color 0.3s;
}
.button:hover {
  background-color: darkblue;
}

여기서 transition: background-color 0.3s;는 'background-color가 바뀔 때 0.3초에 걸쳐 부드럽게 변하라'는 뜻입니다. 이제 버튼에 마우스를 올리면 색이 0.3초 동안 스르륵 진해집니다. 값은 '바뀔 속성 + 걸릴 시간' 순서로 적습니다. 시간을 0.3s(초)로 지정하는 것입니다.

transition의 핵심은, 이것을 변화가 시작되는 곳(:hover)이 아니라 평소 상태에 적는다는 점입니다. '이 요소는 변화를 부드럽게 처리한다'는 성질을 기본값에 부여해 두는 것입니다. 여러 속성을 한꺼번에 부드럽게 하려면 transition: all 0.3s;처럼 all을 쓸 수도 있습니다. transition 하나만으로도 페이지의 완성도가 눈에 띄게 올라갑니다.

🔄 요소 변형하기 — transform

이 섹션에서는 요소를 이동·확대·회전시키는 transform을 살펴보겠습니다.

transform은 요소를 시각적으로 변형하는 속성입니다. 대표적인 세 가지 기능이 있습니다. translate는 이동, scale은 크기 조절, rotate는 회전입니다.

.box:hover {
  transform: scale(1.1);   /* 1.1배로 확대 */
}

이 코드는 마우스를 올리면 요소가 1.1배로 살짝 커지게 합니다. scale(1.1)은 '1.1배 크기'라는 뜻입니다. 이 외에 translate(10px, 20px)은 오른쪽·아래로 이동, rotate(45deg)은 45도 회전을 뜻합니다.

transform의 큰 장점은 주변 배치에 영향을 주지 않는다는 것입니다. 요소를 확대하거나 이동해도 다른 요소들이 밀려나지 않고, 오직 그 요소만 시각적으로 변형됩니다. 그래서 성능도 좋고 부작용도 적어 애니메이션에 즐겨 쓰입니다. 앞서 배운 transition과 함께 쓰면 효과가 극대화됩니다. 예를 들어 버튼에 transition: transform 0.2s를 주고 :hover에서 transform: scale(1.1)을 주면, 마우스를 올릴 때 부드럽게 살짝 커지는 세련된 효과가 완성됩니다.

🎞️ 복잡한 움직임 — keyframes 애니메이션

이 섹션에서는 상태 변화 없이도 스스로 움직이는 keyframes 애니메이션을 살펴보겠습니다.

transition은 'A에서 B로' 두 상태 사이의 변화만 다룹니다. 그런데 여러 단계를 거치거나 저절로 반복되는 복잡한 움직임을 만들고 싶을 때는 @keyframes를 씁니다. keyframes는 애니메이션의 각 단계 모습을 미리 정의하는 것입니다.

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

.box {
  animation: fadeIn 1s;
}

이 코드를 읽어 봅시다. @keyframes fadeIn은 'fadeIn'이라는 이름의 애니메이션을 정의하는데, from(시작)은 투명(opacity: 0), to(끝)는 불투명(opacity: 1)입니다. 즉 '투명에서 서서히 나타나는' 동작을 정의한 것입니다. 그런 다음 .box에 animation: fadeIn 1s;를 주면, 그 요소가 1초에 걸쳐 스르륵 나타납니다.

이렇게 @keyframes로 동작을 정의하고, animation 속성으로 그 동작을 요소에 적용하는 두 단계로 이루어집니다. from·to 대신 0%·50%·100%처럼 퍼센트로 여러 중간 단계를 넣으면 더 복잡한 움직임도 만들 수 있습니다. keyframes는 로딩 스피너, 깜빡임, 반복 효과 등 다양한 곳에 쓰입니다. 다만 입문 단계에서는 '이런 방식으로 복잡한 애니메이션을 만든다'는 큰 그림만 익혀도 충분합니다.

⚠️ 애니메이션을 다룰 때의 주의점

이 섹션에서는 흔한 실수와 유의점을 정리하겠습니다.

첫 번째, transition을 :hover에 적는 것입니다. transition은 평소 상태에 적어야 마우스를 올릴 때도, 뗄 때도 모두 부드럽게 작동합니다. :hover에만 적으면 효과가 어색해집니다.

두 번째, 움직임을 과하게 쓰는 것입니다. 애니메이션은 적절히 쓰면 세련되지만, 너무 많고 화려하면 오히려 산만하고 어지럽습니다. 은은하고 절제된 움직임이 대체로 더 좋은 인상을 줍니다.

세 번째, 접근성을 잊는 것입니다. 과도한 움직임은 일부 사용자에게 불편을 줄 수 있습니다. 실무에서는 '움직임 최소화' 설정을 존중하는 배려도 필요하다는 점을 기억해 두면 좋습니다.

📝 핵심 요약

이번 강에서는 전환과 애니메이션을 배웠습니다.

• :hover — 마우스를 올린 상태를 가리키는 선택자로, 움직임을 촉발하는 계기로 자주 쓰입니다.
• transition — 속성 변화를 정해진 시간 동안 부드럽게 잇습니다. 변화가 시작되는 곳이 아닌 평소 상태에 적습니다.
• transform — translate·scale·rotate로 요소를 이동·확대·회전하며, 주변 배치에 영향을 주지 않아 애니메이션에 적합합니다.
• keyframes — @keyframes로 동작을 정의하고 animation으로 적용해, 여러 단계나 반복되는 복잡한 움직임을 만듭니다.

이제 페이지에 생동감까지 더할 수 있게 되었습니다. 다음 강에서는 색이나 값을 한 곳에서 관리해 재사용하는 CSS 변수를 배워, 유지보수하기 좋은 CSS를 작성하는 법을 익히겠습니다. 다음 강 「변수와 재사용」에서 이어가겠습니다.

📚 참고 자료

• transition — MDN Web Docs
• transform — MDN Web Docs
• @keyframes — MDN Web Docs