7. 트랜지션과-애니메이션

이미지 다운로드

개요 본 학습 문서는 웹 페이지에 생동감을 불어넣는 CSS의 핵심 동적 효과인 트랜지션(Transition), 트랜스폼(Transform), 그리고 애니메이션(Animation) 기술을 심도 있게 다룹니다. 요소의 상태 변화를 부드럽게 이어주는 트랜지션의 기본 원리부터, 2D 및 3D 공간에서의 공간 변형을 제어하는 트랜스폼, 그리고 @keyframes를 활용한 정교한 시무브먼트 구현법을 체계적으로 학습합니다. 실무에서 즉시 활용 가능한 카드 뒤집기, 호버 확대, 경로 애니메이션 등 풍부한 실전 예제와 시작/완료 코드 쌍을 통해 동적 퍼블리싱 능력을 한 단계 높일 수 있도록 구성되었습니다.

01. transition

설명

CSS 속성값이 변경될 때 그 변화를 일정 시간 동안 부드럽게 이어주는 효과를 생성한다. 주로 :hover나 :focus 같은 가상 클래스와 조합하여 상태 변화를 시각화할 때 사용된다.

값	설명
`transition-property`	효과를 적용할 속성 (예: `all`, `width`, `opacity`)
`transition-duration`	효과가 지속될 시간 (단위: s, ms)
`transition-timing-function`	속도 곡선 (`ease`, `linear`, `ease-in-out` 등)
`transition-delay`	효과가 시작되기 전 대기 시간

transition은 초기 상태와 변화된 상태가 모두 정의되어 있어야 작동한다. 자세한 내용은 🔗MDN 참고.

1-1. 호버 이미지 확대 효과

시작 transition-hover.html

<div class="container">
  <div class="item">Hover Me</div>
</div>
<style>
  .item { width: 200px; height: 100px; background: #3498db; color: white; text-align: center; line-height: 100px; cursor: pointer; }
</style>

완료 transition-hover.html

<div class="container">
  <div class="item">Hover Me</div>
</div>
<style>
  .item { width: 200px; height: 100px; background: #3498db; color: white; text-align: center; line-height: 100px; cursor: pointer; transition: all 0.3s ease; }
  .item:hover { transform: scale(1.2); background: #2ecc71; }
</style>

02. transform (2D)

설명

요소를 평면 공간에서 이동, 회전, 크기 조절, 기울이기 등의 변형을 가한다. 실제 레이아웃의 흐름에는 영향을 주지 않고 시각적인 변형만 일어나는 것이 특징이다.

함수	설명
`translate(x, y)`	지정한 좌표만큼 요소 이동
`rotate(angle)`	지정한 각도만큼 요소 회전 (단위: deg)
`scale(x, y)`	요소의 크기를 배율로 조절 (1=원본)
`skew(x, y)`	요소를 특정 각도로 기울임

여러 변형을 동시에 적용하려면 공백으로 구분하여 나열한다 (예: transform: rotate(45deg) scale(1.2);). 자세한 내용은 🔗MDN 참고.

2-1. 2D 변형 실습

시작 transform-2d.html

<div class="box">2D Transform</div>
<style>
  .box { width: 100px; height: 100px; background: orange; margin: 50px; }
</style>

완료 transform-2d.html

<div class="box">2D Transform</div>
<style>
  .box { width: 100px; height: 100px; background: orange; margin: 50px; transition: 0.5s; }
  .box:hover { transform: translate(50px, 20px) rotate(45deg) scale(1.5); }
</style>

03. transform (3D)

설명

요소를 3차원 공간(X, Y, Z축)에서 변형한다. 깊이감을 표현하기 위해 부모 요소에 perspective 속성을 설정하는 것이 필수적이다.

속성/함수	설명
`translate3d(x, y, z)`	3차원 좌표로 이동
`rotateX`, `rotateY`	각 축을 중심으로 입체적 회전
`perspective`	원근감의 깊이 설정 (값이 작을수록 왜곡이 심함)
`backface-visibility`	요소의 뒷면 표시 여부 (`visible`, `hidden`)

perspective는 변형될 요소의 부모에 작성하고, transform: perspective()는 요소 본인에게 직접 원근감을 부여할 때 사용한다.

3-1. 카드 뒤집기 효과

시작 card-flip.html

<div class="card-container">
  <div class="card">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>

완료 card-flip.html

.card-container { perspective: 1000px; }
.card { width: 200px; height: 300px; transition: 0.6s; transform-style: preserve-3d; position: relative; }
.card:hover { transform: rotateY(180deg); }
.front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; text-align: center; line-height: 300px; font-size: 2em; color: white; border-radius: 10px; }
.front { background: #3498db; }
.back { background: #e74c3c; transform: rotateY(180deg); }

04. animation

설명

@keyframes로 정의한 키프레임 흐름에 따라 요소에 복잡한 애니메이션을 적용한다. 트랜지션과 달리 시작과 종료 상태 외에도 중간 단계의 세밀한 제어가 가능하며 무한 반복이 가능하다.

속성	설명
`animation-name`	사용할 `@keyframes`의 이름
`animation-duration`	한 주기가 걸리는 시간
`animation-iteration-count`	반복 횟수 (예: `3`, `infinite`)
`animation-direction`	재생 방향 (`normal`, `alternate`, `reverse`)
`animation-fill-mode`	시작 전/후 상태 유지 (`forwards`, `backwards`, `both`)

animation-play-state를 사용하면 마우스 호버 시 애니메이션을 일시 정지(paused)하거나 재생(running)할 수 있다. 자세한 내용은 🔗MDN 참고.

4-1. 심장 박동 효과

시작 heartbeat.html

<div class="heart">❤</div>
<style>
  .heart { font-size: 100px; color: pink; text-align: center; }
</style>

완료 heartbeat.html

.heart { font-size: 100px; color: pink; text-align: center; animation: heartbeat 1s infinite ease; }
@keyframes heartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

05. 애니메이션 심화

설명

변수(CSS Variables)나 경로(path)를 활용하여 더욱 역동적이고 효율적인 애니메이션을 구현한다. 여러 애니메이션을 동시에 적용하거나 재생 방향 및 채우기 모드를 정밀하게 제어한다.

기법	설명
변수 활용	`--i: 1`과 같이 인라인 변수를 선언하여 키프레임 수치 동적 계산
경로 애니메이션	`offset-path`를 사용하여 특정 곡선을 따라 요소 이동
멀티 애니메이션	쉼표로 구분하여 여러 개의 키프레임을 하나의 요소에 적용

animation-fill-mode: forwards는 애니메이션이 끝난 후 마지막 상태를 유지하게 하여 시각적 연속성을 보장한다.

5-1. 경로 이동 애니메이션

시작 path-animation.html

<div class="wrap"><div class="box"></div></div>
<style>
  .wrap { width: 600px; height: 200px; background: #eee; position: relative; }
  .box { width: 50px; height: 50px; background: red; border-radius: 50%; }
</style>

완료 path-animation.html

.box {
  offset-path: path('M0,100c10,-50 82,-82 127,0c19,-79 119,-102 151,0c5,-77 101,-104 149,-52') auto;
  animation: moveto 5s infinite ease-in-out;
}
@keyframes moveto {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}