웹사이트를 조금 더 생동감 있고 매끄럽게 만들고 싶다면?
꼭 JavaScript를 사용하지 않아도 CSS만으로도 충분히 인터랙티브한 애니메이션을 구현할 수 있습니다.
이번 글에서는 초보자도 쉽게 따라할 수 있는 CSS 애니메이션 기초와 예제를 소개합니다.
CSS 애니메이션이란?
CSS 속성만으로 요소에 움직임이나 효과를 부여하는 기술
렌더링 비용이 낮고, 브라우저 최적화가 잘 되어 있어 부드러운 효과 제공
| 방식 | 설명 |
|——|——|
| transition | 상태 변화 시 애니메이션 적용
| @keyframes | 애니메이션 시퀀스를 직접 정의
1. transition을 이용한 간단한 애니메이션
“`css
button {
background: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
transition: background 0.3s ease;
}
button:hover {
background: #45a049;
}
“`
- 마우스를 올릴 때 배경색이 부드럽게 변경
transition은 마우스오버, 포커스 등 이벤트에 반응
2. keyframes를 이용한 애니메이션
“`css
@keyframes slideDown {
from {
transform: translateY(-100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.banner {
animation: slideDown 0.5s ease-out forwards;
}
“`
- 페이지 진입 시 콘텐츠가 위에서 부드럽게 내려오는 효과
forwards는 애니메이션 종료 후 상태 유지
3. 애니메이션 반복 & 순차 효과
“`css
.loader {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
“`
- 로딩 애니메이션 등 반복 효과에 사용
infinite,alternate,delay등 다양하게 설정 가능
4. transform과 opacity 응용
“`css
.card {
transition: transform 0.3s ease, opacity 0.3s;
}
.card:hover {
transform: scale(1.05);
opacity: 0.9;
}
“`
- 마우스 올렸을 때 살짝 커지고 반투명하게
- 시각적 피드백이 좋아 UX 향상
🖼️ ALT 태그 예시:
5. 실전 예제: 버튼 클릭 애니메이션
“`css
@keyframes clickEffect {
0% { transform: scale(1); }
50% { transform: scale(0.95); }
100% { transform: scale(1); }
}
button:active {
animation: clickEffect 0.2s ease;
}
“`
- 클릭할 때 버튼이 살짝 눌리는 듯한 효과
- 간단하지만 반응성 있는 UI 구현 가능
애니메이션 최적화 팁
- transform, opacity 속성을 주로 활용 (GPU 가속됨)
will-change속성으로 사전 렌더링 힌트 제공- 과도한 애니메이션은 UX 저하 및 접근성 문제 발생 가능
추천 CSS 애니메이션 라이브러리
| 이름 | 특징 |
|——|——|
| Animate.css | 다양한 keyframe 모음 (간편 사용)
| Hover.css | 마우스오버 효과 전문
| AOS.js | 스크롤 기반 애니메이션 (CSS 연계 가능)
마무리
CSS만으로도 충분히 세련되고 반응성 높은 애니메이션을 만들 수 있습니다.
오늘 소개한 예제들을 토대로 버튼, 배너, 카드 UI 등 인터랙션을 개선해 보세요.
코드는 짧지만 효과는 강력합니다!
🔎 다음 포스팅 주제 추천
→ 36번: CSS로 구현하는 버튼 효과 10가지
→ 19번: 웹 디자인 기초: 색상, 폰트, 레이아웃
참고자료
- https://developer.mozilla.org/ko/docs/Web/CSS/animation
- https://animate.style/