CSS Animation and @keyframes

단순한 상태 변화를 넘어 웹 요소에 연속적이고 자율적인 생명력을 불어넣는 CSS Animation에 대해 알아보겠습니다.

transition이 A에서 B로 가는 일회성 변화라면, animation은 여러 단계를 거치거나 무한히 반복되는 복잡한 움직임을 구현할 때 사용합니다.

---

1. @keyframes (애니메이션의 설계도)

애니메이션을 만들려면 먼저 시간의 흐름에 따른 스타일 변화를 정의해야 하는데, 이를 @keyframes라고 부릅니다.

• 정의: 애니메이션의 이름과 각 시점(%)별 스타일을 지정합니다.
• 시점: 0%(시작, from)부터 100%(끝, to)까지 원하는 구간을 쪼개어 설정할 수 있습니다.

CSS

 

@keyframes slideAndColor {
  0% { transform: translateX(0); background-color: red; }
  50% { transform: translateX(200px); background-color: yellow; }
  100% { transform: translateX(0); background-color: red; }
}

---

2. Animation의 핵심 속성들

설계도를 만들었다면, 이제 어떤 요소에 적용할지 속성을 통해 결정합니다.

• animation-name: 사용할 @keyframes의 이름을 지정합니다.
• animation-duration: 애니메이션 한 주기가 완료되는 데 걸리는 시간입니다.
• animation-timing-function: 속도 변화의 흐름(linear, ease, ease-in-out 등)을 정합니다.
• animation-iteration-count: 반복 횟수를 정합니다. 숫자나 infinite(무한)를 사용합니다.
• animation-direction: 진행 방향을 정합니다. (normal, reverse, alternate 등)

---

3. 중요 함수 및 제어 속성

움직임을 더 정교하게 제어하는 설정들입니다.

• animation-fill-mode: 애니메이션이 끝나기 전과 후에 요소의 상태를 어떻게 유지할지 정합니다. (forwards를 쓰면 끝난 상태 그대로 멈춥니다.)
• animation-play-state: 애니메이션을 일시 정지(paused)하거나 재생(running)합니다. 주로 자바스크립트로 제어할 때 유용합니다.

---

4. 실전 예제 코드: "통통 튀는 공"

단축 속성(Shorthand)을 사용하여 여러 설정을 한 줄로 표현하는 것이 일반적입니다.

구조: animation: 이름 시간 타이밍 대기시간 횟수 방향;

CSS

 

/* 1. 애니메이션 설계도 만들기 */
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  
  /* 2. 애니메이션 적용하기 */
  /* 이름(bounce), 0.6초간, 부드럽게(ease-in-out), 무한반복(infinite) */
  animation: bounce 0.6s ease-in-out infinite;
}

---

📋 속성별 예제 모음

속성	코드 예시	설명
Iteration	animation-iteration-count: 3;	딱 3번만 움직이고 정지함
Direction	animation-direction: alternate;	갔다가 다시 돌아오는 왕복 운동
Fill-mode	animation-fill-mode: forwards;	애니메이션 종료 후 마지막 모습 유지
Play-state	.box:active { animation-play-state: paused; }	클릭하는 동안 움직임이 멈춤

---

학습 정리

• **@keyframes**는 애니메이션의 '시나리오'이고, animation 속성은 이를 '실행'하는 설정이다.
• **infinite**를 활용하면 로딩 바처럼 계속 돌아가는 효과를 쉽게 만든다.
• alternate 방향 설정은 왕복 애니메이션을 만들 때 keyframes를 절반만 써도 되게 해준다.

---

CSS 애니메이션의 정점까지 도달하셨습니다!

---

---

CSS 애니메이션의 각 세부 속성들이 실제 움직임에 어떤 차이를 만드는지, 개별 예제 코드를 통해 상세히 살펴보겠습니다.

모든 예제는 bounce라는 동일한 설계도를 사용하지만, 속성 설정에 따라 결과가 완전히 달라집니다.

---

1. animation-iteration-count (반복 횟수)

애니메이션을 몇 번 실행할지 결정합니다.

CSS

 

.count-box {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  animation-name: bounce;
  animation-duration: 1s;

  /* 숫자(3)만큼 반복하거나 infinite(무한)로 설정 가능 */
  animation-iteration-count: 3; 
}

---

2. animation-direction (진행 방향)

애니메이션이 끝난 후 다시 시작할 때의 방향을 정합니다.

CSS

 

.direction-box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: bounce 1s infinite; /* 단축 속성 */

  /* alternate: 0%→100% 갔다가 다시 100%→0%로 돌아옴 (왕복) */
  /* reverse: 처음부터 거꾸로 실행 */
  animation-direction: alternate; 
}

---

3. animation-fill-mode (종료 후 상태)

애니메이션이 시작되기 전이나 종료된 후의 스타일을 어떻게 유지할지 정합니다.

CSS

 

.fill-box {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  animation: move-right 2s;

  /* forwards: 애니메이션이 끝난 지점(100%)의 스타일을 그대로 유지 */
  /* backwards: 시작 대기 시간 동안 0%의 스타일을 미리 적용 */
  animation-fill-mode: forwards; 
}

@keyframes move-right {
  to { transform: translateX(200px); }
}

---

4. animation-play-state (재생 및 일시정지)

애니메이션을 멈추거나 다시 재생할 때 사용하며, 사용자 상호작용과 결합할 때 빛을 발합니다.

CSS

 

.play-box {
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  animation: rotate-box 2s linear infinite;
}

/* 박스에 마우스를 올리면 회전 애니메이션이 일시 정지됨 */
.play-box:hover {
  animation-play-state: paused;
}

@keyframes rotate-box {
  to { transform: rotate(360deg); }
}

---

5. animation-delay (대기 시간)

요소가 화면에 나타난 후, 실제로 애니메이션을 시작할 때까지의 지연 시간을 설정합니다.

CSS

 

.delay-box {
  width: 50px;
  height: 50px;
  background-color: #8e44ad;
  animation: bounce 1s infinite;
  
  /* 1.5초가 지난 뒤에 애니메이션 시작 */
  animation-delay: 1.5s;
}

---

연습 꿀팁

• 단축 속성 순서: animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]; 순으로 작성하면 코드가 훨씬 깔끔해집니다.
• 디버깅: 크롬 개발자 도구의 'Animations' 탭을 열면 타임라인을 보면서 속도를 늦추거나 시점별 스타일을 확인하기 매우 좋습니다.

---

개별 속성들의 쓰임새를 완벽하게 파악하셨습니다!

---