웹 페이지에 생동감을 더하고 사용자 경험을 향상시키는 방법 중 하나는 CSS 애니메이션입니다. 애니메이션은 클릭, 스크롤, 마우스오버 등 다양한 상호작용에 반응해 시각적인 효과를 제공합니다. 이 글에서는 CSS 애니메이션의 기초부터 실전에서 바로 사용할 수 있는 예제까지 자세히 소개합니다.
1. CSS 애니메이션이란?
CSS 애니메이션은 HTML 요소의 속성을 시간의 흐름에 따라 변화시키는 기술입니다. **트랜지션(Transitions)**과 **키프레임(Keyframes)**을 사용해 애니메이션을 구현할 수 있습니다.
CSS 애니메이션의 주요 장점:
• 사용자 상호작용을 강조.
• 페이지의 시각적 매력 향상.
• JavaScript 없이 간단히 구현 가능.
2. CSS 트랜지션(Transitions)
2-1. 트랜지션 기본 문법
transition 속성을 사용해 요소의 상태 변화에 애니메이션 효과를 추가합니다.
transition: [속성] [지속 시간] [타이밍 함수] [지연 시간];
2-2. 트랜지션 예제
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.1);
}
결과: 버튼에 마우스를 올리면 배경색이 부드럽게 변경되고 크기가 커집니다.
3. CSS 키프레임(Keyframes)
3-1. 키프레임 기본 문법
@keyframes 규칙을 사용해 애니메이션의 각 단계를 정의합니다.
@keyframes 애니메이션_이름 {
0% { 속성1: 값1; 속성2: 값2; }
100% { 속성1: 값3; 속성2: 값4; }
}
3-2. 키프레임 애니메이션 속성
키프레임 애니메이션을 적용하려면 animation 속성을 사용합니다.
animation: [이름] [지속 시간] [타이밍 함수] [지연 시간] [반복 횟수] [방향];
3-3. 키프레임 예제
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
결과: 빨간 박스가 2초 동안 오른쪽으로 이동한 후 원래 위치로 돌아오는 애니메이션을 반복합니다.
4. 트랜지션과 키프레임의 차이점
트랜지션 키프레임
상태 변화 시 자동 실행 애니메이션을 정의하고 수동으로 시작
시작과 끝 상태만 정의 가능 중간 상태를 상세히 정의 가능
단순한 애니메이션에 적합 복잡한 애니메이션에 적합
5. CSS 애니메이션 실전 예제
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 애니메이션 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="animation-container">
<div class="circle"></div>
<button class="button">호버해 보세요</button>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.animation-container {
text-align: center;
}
/* 키프레임 애니메이션 */
.circle {
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50%;
animation: bounce 2s infinite ease-in-out;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
/* 트랜지션 애니메이션 */
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-top: 20px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.1);
}
결과:
• 파란 원은 위아래로 튀어오르는 애니메이션을 반복합니다.
• 버튼에 마우스를 올리면 부드럽게 색상이 바뀌고 크기가 커집니다.
6. CSS 애니메이션 활용 팁
1. 타이밍 함수 활용: ease, linear, ease-in, ease-out, ease-in-out 등 다양한 타이밍 함수를 사용해 애니메이션의 속도 변화를 조정하세요.
2. 성능 최적화: GPU 가속이 가능한 transform과 opacity 속성을 사용해 애니메이션 성능을 개선하세요.
3. 반복 제어: animation-iteration-count를 infinite로 설정하면 애니메이션이 무한 반복됩니다.
4. 애니메이션 중단: animation-play-state를 paused로 설정해 특정 이벤트에 따라 애니메이션을 일시 정지할 수 있습니다.
.circle:hover {
animation-play-state: paused;
}
CSS 애니메이션은 웹 페이지를 생동감 있게 만드는 데 필수적인 도구입니다. 트랜지션은 간단한 상태 변화를 처리하고, 키프레임은 복잡한 애니메이션 효과를 제공합니다. 이 글에서 소개한 예제를 따라 실습하며 애니메이션 디자인에 도전해 보세요.
다음 글에서는 CSS로 인터랙티브 웹 요소 구현하기를 다룰 예정입니다.
