CSS의 Animation과 @keyframes

 

🟢 animation

요소의 스타일을 시간에 따라 다양한 효과 및 변화시키는 기능.

 

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

애니메이션의 시간의 흐름에 따른 스타일 변화 단계를 정의.

@keyframes 애니메이션이름 {
  from { /* 상태 */ }
  to { /* 상태 */ }
}

@keyframes 애니메이션이름 {
  0% { /* 시작 상태 */ }
  50% { /* 중간 상태 */ }
  100% { /* 끝 상태 */ }
}

• from (시작) → 0%, to (끝) → 100%.
• 중간 단계(예: 25%, 50%, 75%) 정의 가능.

 

 

🎯 주요 속성 🎯

🔹 animation-name: 이름.

• @keyframes에서 정의한 이름.

 

🔹 animation-duration: 완료되는데 걸리는 시간.

• 예: 2s, 500ms.

 

🔹 animation-timing-function: 속도 변화 방식.

• 예: linear, ease, ease-in-out

 

🔹 animation-delay: 시작 전 대기 시간.

• 예: 2s, 500ms.

 

🔹 animation-iteration-count: 반복 횟수 지정.

• 숫자 또는 infinite(무한)

 

🔹 animation-direction: 진행 방향 지정.

• normal: 정방향.
• reverse: 역방향.
• alternate: 정방향 → 역방향 반복.

 

🔹 animation-fill-mode: 애니메이션 후 상태.

• forwards: 끝 상태 유지.
• backwards: 시작 상태 유지.
• both: 둘 다 유지.

 

 

🧿 중요 함수 및 제어 속성 🧿

🔹 animation-fill-mode:애니메이션이 시작되기 전과 끝난 후에 요소에 어떤 스타일을 적용할지를 결정.

• none: 애니메이션 외에는 스타일을 유지하지 않음. (기본값)
• forwards: 애니메이션 종료 후 마지막 상태를 유지.
• backwards: 애니메이션 시작 전 처음 상태를 유지.
• both: 시작 전과 종료 후 모두 상태를 유지 (forwards + backwards).

 

🔹 animation-play-state: 애니메이션이 실행 중인지 일시정지 상태인지를 결정.

• running: 애니메이션이 정상적으로 실행됨. (기본값)
• paused: 애니메이션이 일시정지됨. (필요하면 JS나 CSS로 다시 실행 가능)

 

 

🔨 축약형 속성 (Shorthand)

animation 속성을 한 줄로 정의하는 속성.

.box {
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
}

• 문법: animation: 이름 지속시간 타이밍 대기시간 횟수 방향 스타일요소;
  • 시간 관련 값 순서 위치 주의, 이름&지속시간은 필수 값, 생략 시 기본값 적용. 

 

 

📍  POINT 📍

✔️ @keyframes 는 애니메이션의 시나리오, animation 속성은 이를 실행하는 설정. ✔️

✔️ infinite 를 활용하면 로딩 바처럼 계속 돌아가는 효과를 쉽게 만든다. ✔️

✔️ alternate 방향 설정은 왕복 애니메이션을 만들 때 keyframes를 절반만 써도 되게 해준다. ✔️

 

 

📋 속성별 예제 모음 📋

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

 

---

 

⚙️ 실전 예제 코드: 통통 튀는 공 ⚙️

/* 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;
}