728x90
1. CSS 애니메이션 기본
CSS 애니메이션은 @keyframes와 animation 속성을 사용하여 단계별로 스타일을 변화시킵니다. @keyframes는 애니메이션의 각 단계에서 적용할 스타일을 정의하며, animation 속성은 애니메이션을 요소에 적용하는 데 사용됩니다.
기본 문법
@keyframes 애니메이션이름 {
0% { 속성: 값; }
100% { 속성: 값; }
}
선택자 {
animation: 애니메이션이름 시간 타이밍함수 반복횟수;
}
예제: 단순 이동 애니메이션
@keyframes moveRight {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: moveRight 2s ease-in-out;
}코드 설명
- @keyframes moveRight: 0%에서 100%까지 transform을 사용해 translateX 값을 변경합니다.
- .box에 animation: moveRight 2s ease-in-out;을 적용해 2초 동안 오른쪽으로 이동하는 애니메이션을 지정했습니다.
2. 애니메이션 반복과 방향 설정
1) animation-iteration-count
animation-iteration-count 속성은 애니메이션이 반복되는 횟수를 지정합니다. infinite 값으로 무한 반복이 가능합니다.
.box {
animation: moveRight 2s ease-in-out infinite;
}2) animation-direction
animation-direction 속성은 애니메이션의 진행 방향을 설정합니다.
- normal: 시작부터 끝 방향으로 재생
- reverse: 끝에서 시작으로 재생
- alternate: 정방향과 역방향을 번갈아가며 재생
- alternate-reverse: 역방향과 정방향을 번갈아가며 재생
.box {
animation: moveRight 2s ease-in-out infinite alternate;
}코드 설명
- infinite alternate 설정으로 애니메이션이 무한 반복되며 정방향과 역방향을 번갈아 재생합니다.
3. 단계별 애니메이션: 복잡한 시각 효과 만들기
애니메이션 단계별로 여러 속성을 동시에 변경하면 더욱 복잡한 애니메이션 효과를 만들 수 있습니다.
예제: 회전과 크기 변경 애니메이션
@keyframes spinAndGrow {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.5) rotate(180deg); }
100% { transform: scale(1) rotate(360deg); }
}
.circle {
width: 100px;
height: 100px;
background-color: #2ecc71;
border-radius: 50%;
animation: spinAndGrow 3s infinite ease-in-out;
}코드 설명
- @keyframes spinAndGrow: 0%, 50%, 100% 단계마다 크기와 회전 각도를 변경하여 요소가 커졌다가 원래 크기로 돌아오며 회전합니다.
- animation: spinAndGrow 3s infinite ease-in-out: 애니메이션이 3초 동안 무한히 반복됩니다.
4. 스크롤 기반 애니메이션
스크롤 위치에 따라 애니메이션을 실행하는 기법은 시각적 주목도를 높이고, 콘텐츠 노출을 자연스럽게 만들어줍니다. 스크롤 이벤트와 CSS를 조합하면, 사용자가 스크롤할 때 요소가 나타나는 애니메이션을 구현할 수 있습니다.
예제: 스크롤 시 요소 페이드 인 효과
스크롤 애니메이션은 JavaScript와 함께 구현해야 하며, CSS로 애니메이션 스타일을 정의합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>스크롤 애니메이션 예제</title>
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="fade-in">스크롤 시 나타나는 텍스트</div>
<script>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
</body>
</html>코드 설명
- .fade-in 클래스는 요소의 초기 위치를 설정하고 opacity를 0으로 설정하여 숨깁니다.
- JavaScript의 IntersectionObserver API를 사용해 요소가 뷰포트에 진입할 때 visible 클래스를 추가하여 트랜지션 효과로 부드럽게 나타나도록 설정했습니다.
5. 실전 예제: 카드 애니메이션
아래 예제는 CSS 애니메이션과 JavaScript를 결합해 카드가 확대되며 정보를 표시하는 효과를 구현한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS 카드 애니메이션 예제</title>
<style>
.card {
width: 200px;
height: 300px;
background-color: #3498db;
color: white;
border-radius: 10px;
overflow: hidden;
position: relative;
transform: scale(1);
transition: transform 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
.card:hover {
transform: scale(1.1);
}
.card-content {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.card:hover .card-content {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="card">
<div class="card-content">카드 내용</div>
</div>
</body>
</html>코드 설명
- 카드 확대 효과: .card 요소에 transform: scale(1.1);을 적용해 마우스를 올리면 카드가 살짝 확대되도록 설정했습니다.
- 내용 표시 효과: .card-content 요소는 초기 상태에서 불투명도를 0으로 설정하고 살짝 아래쪽에 위치시켜, 카드가 확대될 때 천천히 나타나도록 트랜지션을 설정했습니다.
고급 CSS 애니메이션 속성 요약
속성설명
| animation-name | 적용할 애니메이션 이름을 지정 |
| animation-duration | 애니메이션 실행 시간 설정 |
| animation-timing-function | 애니메이션 진행 속도 조절 (ease, linear 등) |
| animation-delay | 애니메이션 시작 전 지연 시간 설정 |
| animation-iteration-count | 애니메이션 반복 횟수 설정 (infinite로 무한 반복) |
| animation-direction | 애니메이션 방향 설정 (normal, reverse, alternate) |
| animation-fill-mode | 애니메이션이 끝난 후 상태 (forwards, backwards) |
요약
이번 강의에서는 CSS 애니메이션과 고급 인터랙션 기법을 통해 다양한 애니메이션 효과를 구현하는 방법을 배웠습니다. 스크롤 애니메이션과 단계별 애니메이션을 활용하여, 시각적으로 매력적이고 사용자 경험을 개선하는 웹 페이지를 제작할 수 있습니다. 다음 강의에서는 CSS와 JavaScript 결합 기법을 통해 애니메이션과 인터랙션을 더욱 강화하는 방법을
728x90
'Study > CSS' 카테고리의 다른 글
| CSS 기초 강의 14편: 다양한 시각 효과와 CSS 트릭 활용하기 (1) | 2024.11.29 |
|---|---|
| CSS 기초 강의 13편: CSS와 JavaScript를 결합한 고급 애니메이션과 인터랙션 (0) | 2024.11.28 |
| CSS 기초 강의 11편: 고급 CSS 기법과 트릭 활용하기 (0) | 2024.11.26 |
| CSS 기초 강의 10편: CSS 프레임워크를 활용한 빠른 웹 페이지 제작 (0) | 2024.11.25 |
| CSS 기초 강의 9편: CSS 변수와 함수 활용하기 (0) | 2024.11.24 |
