트랜지션과 애니메이션

잘 다듬은 움직임은 인터페이스를 자연스럽고 생동감 있게 만듭니다. CSS만으로 상태 전환에 부드러운 효과를 주거나, 반복되는 애니메이션을 정의할 수 있습니다.

학습 목표

• transition으로 속성 변화를 부드럽게 만든다.
• transform으로 이동, 회전, 확대를 적용한다.
• @keyframes로 애니메이션을 정의한다.
• animation 속성으로 재생을 제어한다.

transition

transition은 속성 값이 바뀔 때 그 변화를 시간에 걸쳐 보여줍니다.

.button {
  background: #4c8bf5;
  transition: background 0.2s ease;
}

.button:hover {
  background: #3a6fd0;
}

transition: 속성 지속시간 타이밍함수 지연시간 순서로 작성합니다.

.box {
  transition: transform 0.3s ease-in-out 0.1s;
}

타이밍 함수	느낌
linear	일정한 속도
ease	시작·끝이 부드러움(기본)
ease-in	천천히 시작
ease-out	천천히 끝남

💡 TIP — 여러 속성을 한꺼번에 전환하려면 쉼표로 나열합니다: transition: background 0.2s, transform 0.3s;. all도 가능하지만 의도치 않은 속성까지 전환될 수 있어 명시를 권장합니다.

transform

transform은 요소를 레이아웃에 영향을 주지 않고 시각적으로 변형합니다.

.a { transform: translateX(20px); }   /* 이동 */
.b { transform: rotate(15deg); }      /* 회전 */
.c { transform: scale(1.1); }         /* 확대 */
.d { transform: translateY(-4px) scale(1.05); } /* 조합 */

transform은 GPU 가속을 받아 부드럽게 움직이므로, 위치 이동에 top/left보다 translate를 권장합니다.

@keyframes

반복되거나 여러 단계를 거치는 움직임은 @keyframes로 정의합니다.

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

from/to는 0%/100%와 같습니다.

animation

정의한 키프레임을 요소에 적용합니다.

.card {
  animation: fade-in 0.4s ease-out;
}

.heart {
  animation: pulse 1s ease-in-out infinite;
}

animation: 이름 지속시간 타이밍함수 지연 반복횟수 방향 순서입니다.

속성	예시 값
animation-iteration-count	infinite, 3
animation-direction	alternate, reverse
animation-fill-mode	forwards, both

⚠️ 주의 — 과도하거나 빠른 움직임은 어지러움을 줄 수 있습니다. 접근성을 위해 @media (prefers-reduced-motion: reduce)로 움직임을 줄이는 대안을 제공하는 것이 좋습니다.

요약

• transition은 상태가 바뀔 때 변화를 부드럽게 이어줍니다.
• transform은 레이아웃을 건드리지 않고 이동·회전·확대합니다.
• @keyframes로 단계별 움직임을 정의합니다.
• animation으로 반복·방향 등 재생을 제어합니다.

연습문제

1. 버튼에 마우스를 올리면 배경색이 0.2초에 걸쳐 바뀌게 하는 규칙을 작성하세요.
2. 요소를 위로 4px 올리면서 1.05배 확대하는 transform을 작성하세요.
3. 투명에서 불투명으로 나타나는 @keyframes를 정의하세요.
4. 어떤 요소가 1초 주기로 무한히 커졌다 작아지게 하려면 animation을 어떻게 작성할까요?

힌트 — transition은 속성과 시간, transform은 translate/scale 조합, animation의 무한 반복은 infinite입니다.