[CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기!

---

안녕하세요! 😊 지난번에는 CSS Grid를 활용해 반응형 웹사이트를 만드는 방법을 배웠어요.

[CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기!

 

이제 레이아웃을 잘 만들 수 있지만, 웹사이트를 더 생동감 있게 만들려면?
바로 애니메이션(Animation) 효과를 추가하면 돼요!

 

오늘은 CSS 애니메이션의 핵심 개념과 @keyframes를 활용한 부드러운 효과 적용법을 배워볼 거예요.
자, 그럼 시작해볼까요? 🎨✨

---

1️⃣ CSS 애니메이션이란?

CSS 애니메이션은 HTML 요소를 부드럽게 이동하거나 변형시키는 효과를 줄 때 사용해요.
📌 JavaScript 없이도 애니메이션 효과를 간편하게 적용할 수 있어요!

 

✅ CSS 애니메이션을 사용하면?
✔ 버튼을 클릭할 때 부드럽게 변화
✔ 이미지가 자연스럽게 등장 & 사라짐
✔ 스크롤 시 효과적으로 화면 구성 가능

---

2️⃣ @keyframes을 활용한 기본 애니메이션

CSS에서 애니메이션을 만들려면 @keyframes를 사용해요.

📌 기본 문법

@keyframes 애니메이션이름 {
    0% { 속성: 값; }
    100% { 속성: 값; }
}

✅ 0% → 시작 상태, 100% → 끝나는 상태를 의미해요!

---

✅ 기본 애니메이션 예제

 

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.box {
    width: 100px;
    height: 100px;
    background: steelblue;
    animation: fadeIn 2s ease-in-out;
}

<div class="box"></div>

✅ 결과: box가 2초 동안 서서히 나타나는 효과

---

3️⃣ 다양한 애니메이션 적용하기

✅ 1. 좌우로 움직이는 효과 (translateX)

@keyframes moveRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: moveRight 1.5s ease-in-out infinite alternate;
}

✅ 결과: 요소가 좌우로 반복해서 움직임!

---

✅ 2. 크기 변화 효과 (scale)

@keyframes zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

.button {
    animation: zoom 1s ease-in-out infinite alternate;
}

✅ 결과: 버튼이 커졌다 작아졌다 반복

---

✅ 3. 회전 효과 (rotate)

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon {
    animation: spin 2s linear infinite;
}

✅ 결과: 아이콘이 계속 회전

---

✅ 4. 배경색 변경 효과 (background-color)

@keyframes changeColor {
    0% { background-color: red; }
    100% { background-color: blue; }
}

.color-box {
    animation: changeColor 3s ease-in-out infinite alternate;
}

✅ 결과: 빨강 → 파랑으로 색이 바뀌는 효과

---

4️⃣ animation 속성 정리

📌 애니메이션을 제어하는 주요 속성들

속성	설명
animation-name	적용할 @keyframes 이름
animation-duration	애니메이션 지속 시간 (초 단위)
animation-timing-function	속도 곡선 (ease, linear, ease-in-out 등)
animation-delay	시작하기 전 대기 시간
animation-iteration-count	반복 횟수 (infinite면 무한 반복)
animation-direction	애니메이션 진행 방향 (normal, reverse, alternate)

✅ 애니메이션 속성을 한 줄로 작성 가능!

animation: moveRight 1.5s ease-in-out infinite alternate;

---

📌 마무리 & 다음 단계는?

오늘은 CSS 애니메이션과 @keyframes 활용법을 배웠어요!
✅ 기본 애니메이션 (fadeIn, moveRight, scale, rotate)
✅ animation 속성을 사용해 다양한 효과 추가
✅ 실전에서 활용할 수 있는 애니메이션 예제

 

📢 다음 글에서는?

👉 실전 프로젝트! CSS 애니메이션을 활용한 인터랙티브 웹사이트 만들기
👉 JavaScript와 CSS 애니메이션을 결합해 더 강력한 효과 추가하기

 

다음 글도 기대해주세요! 😊

[CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기