안녕하세요! 😊 지난번에는 CSS 애니메이션(@keyframes)을 활용하는 방법을 배웠어요.
[CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기!
안녕하세요! 😊 지난번에는 CSS Grid를 활용해 반응형 웹사이트를 만드는 방법을 배웠어요.이제 레이아웃을 잘 만들 수 있지만, 웹사이트를 더 생동감 있게 만들려면?바로 애니메이션(Animation) 효
it-afternoon.tistory.com
이제 실전에서 애니메이션을 활용해 생동감 있는 웹사이트를 만들어볼 거예요!
📌 오늘 만들 프로젝트
✔ @keyframes을 사용해 버튼, 이미지, 텍스트에 애니메이션 적용
✔ hover, scroll 시 애니메이션 추가로 인터랙티브 효과 구현
✔ 반응형 웹에 적용할 수 있는 애니메이션 실전 예제
자, 그럼 시작해볼까요? 🎨✨
1️⃣ 프로젝트 개요: 인터랙티브 웹페이지 만들기
우리는 스크롤하면 등장하는 효과 + 버튼 애니메이션이 포함된 웹페이지를 만들 거예요!
✅ 기능 요약
✔ fadeIn 애니메이션 → 스크롤 시 콘텐츠 부드럽게 등장
✔ hover 애니메이션 → 버튼 클릭 유도
✔ @keyframes로 로고 애니메이션 추가
2️⃣ HTML 코드 작성
먼저, 웹페이지의 기본 구조를 만들어볼게요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 웹사이트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="logo">Welcome to My Website</h1>
<button class="cta-button">클릭하세요!</button>
</header>
<section class="content">
<h2 class="fade-in">스크롤하면 나타나는 텍스트</h2>
<p class="fade-in">이것은 애니메이션 효과가 적용된 문단입니다.</p>
</section>
<script src="script.js"></script>
</body>
</html>✅ 이제 HTML 뼈대가 완성됐어요!
이제 CSS를 활용해 애니메이션을 추가해볼까요?
3️⃣ CSS 애니메이션 추가하기
📌 1. 로고가 부드럽게 흔들리는 효과 (@keyframes shake)
@keyframes shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
.logo {
font-size: 30px;
font-weight: bold;
text-align: center;
animation: shake 1.5s ease-in-out infinite alternate;
}✅ 결과: 로고가 흔들리는 효과!
📌 2. 버튼에 hover 애니메이션 추가 (@keyframes buttonHover)
@keyframes buttonHover {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
.cta-button {
background: navy;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.cta-button:hover {
animation: buttonHover 0.3s ease-in-out;
}✅ 결과: 버튼에 마우스를 올리면 크기가 커지는 효과!
📌 3. 스크롤하면 부드럽게 등장하는 효과 (fadeIn)
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}✅ 결과: 텍스트가 처음에는 숨겨졌다가 스크롤하면 부드럽게 등장!
4️⃣ JavaScript로 스크롤 이벤트 추가
애니메이션이 스크롤할 때 적용되도록 JavaScript를 추가해볼게요!
📌 스크롤 시 fade-in 클래스가 활성화되도록 설정
document.addEventListener("DOMContentLoaded", function () {
const fadeElements = document.querySelectorAll(".fade-in");
function fadeInOnScroll() {
fadeElements.forEach(el => {
const elementTop = el.getBoundingClientRect().top;
if (elementTop < window.innerHeight * 0.8) {
el.style.opacity = "1";
el.style.transform = "translateY(0)";
}
});
}
window.addEventListener("scroll", fadeInOnScroll);
fadeInOnScroll();
});✅ 결과: 사용자가 스크롤하면 fade-in 요소들이 자연스럽게 나타남!
📌 최종 결과물 정리
✅ PC & 모바일에서 동작하는 애니메이션 포함
✅ 스크롤 시 텍스트가 부드럽게 등장 (fade-in)
✅ 버튼 hover 시 자연스럽게 확대 (buttonHover)
✅ 로고가 흔들리는 효과 (shake)
💡 이제 더욱 생동감 있는 웹사이트를 만들 수 있어요! 🚀
📌 마무리 & 다음 단계는?
오늘은 CSS 애니메이션을 활용한 실전 프로젝트를 진행했어요!
✅ @keyframes를 사용한 다양한 애니메이션 효과
✅ hover, scroll 이벤트와 결합하여 자연스러운 인터랙션 추가
✅ JavaScript를 활용한 스크롤 애니메이션
📢 다음 글에서는?
👉 JavaScript와 CSS 애니메이션을 결합해 더 강력한 효과 추가하기
👉 웹사이트 속도 최적화 & 애니메이션 성능 개선 방법 배우기
다음 글도 기대해주세요! 😊
'개발 공부 > 기타' 카테고리의 다른 글
| [웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기! (0) | 2025.03.31 |
|---|---|
| [JavaScript + CSS 애니메이션] 더 강력한 인터랙티브 효과 만들기! (1) | 2025.03.28 |
| [CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기! (1) | 2025.03.26 |
| [CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기! (0) | 2025.03.25 |
| [CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기! (0) | 2025.03.24 |