반응형
현대 웹 디자인에서 애니메이션과 트랜지션은 사용자 경험을 향상시키고, 페이지에 생동감을 더하는 데 중요한 역할을 합니다. 이번 포스팅에서는 CSS를 활용해 웹 페이지에서 애니메이션과 트랜지션을 구현하는 방법을 알아보겠습니다. 트랜지션은 요소의 상태가 변경될 때 부드러운 효과를 추가하고, 애니메이션은 요소에 지속적인 동작을 적용하는 데 사용됩니다.
1. CSS 트랜지션(Transition) 기본 개념
**트랜지션(Transition)**은 요소의 속성 변화가 일정한 시간 동안 서서히 이루어지도록 만드는 CSS 기능입니다. 예를 들어, 버튼에 마우스를 올렸을 때 색상이 즉시 변경되지 않고, 부드럽게 변하는 효과를 줄 수 있습니다.
1-1. 기본 문법
.element {
transition: property duration timing-function delay;
}- property: 트랜지션이 적용될 CSS 속성 (예: background-color, width)
- duration: 트랜지션이 걸리는 시간 (예: 0.5s)
- timing-function: 속도가 어떻게 변화할지를 결정 (예: ease, linear)
- delay: 트랜지션이 시작되기 전까지의 대기 시간
1-2. 예시: 버튼 색상 변화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜지션 예시</title>
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
border: none;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<button class="button">Hover Me</button>
</body>
</html>설명:
- 이 코드는 버튼에 마우스를 올렸을 때 배경색이 부드럽게 변하는 효과를 적용합니다.
- **transition: background-color 0.5s ease;**로 트랜지션이 0.5초 동안 발생하며, ease는 자연스럽게 속도가 변화하도록 설정합니다.
2. CSS 애니메이션(Animation) 기본 개념
**애니메이션(Animation)**은 요소에 지속적이고 복잡한 동작을 적용할 수 있습니다. CSS 애니메이션은 keyframes 규칙을 사용하여 요소의 상태를 시간에 따라 정의하고, 이를 반복하거나 특정 기간 동안 적용할 수 있습니다.
2-1. 기본 문법
@keyframes animation-name {
0% {
/* 초기 상태 */
}
100% {
/* 마지막 상태 */
}
}
.element {
animation: animation-name duration timing-function delay iteration-count direction;
}- animation-name: 애니메이션의 이름
- duration: 애니메이션이 실행되는 시간 (예: 2s)
- timing-function: 속도 곡선 (예: ease, linear)
- delay: 애니메이션 시작 전 대기 시간
- iteration-count: 애니메이션 반복 횟수 (예: infinite는 무한 반복)
- direction: 애니메이션 진행 방향 (예: normal, reverse)
2-2. 예시: 박스가 위아래로 움직이는 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션 예시</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: moveUpDown 2s ease-in-out infinite;
}
@keyframes moveUpDown {
0% {
top: 0;
}
50% {
top: 150px;
}
100% {
top: 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>설명:
- @keyframes 규칙을 사용해 박스가 위아래로 움직이는 애니메이션을 정의했습니다.
- **animation: moveUpDown 2s ease-in-out infinite;**는 2초 동안 위아래로 움직이며, 무한 반복되도록 설정했습니다.
3. 트랜지션과 애니메이션의 차이점
트랜지션:
- 한 상태에서 다른 상태로 변화를 적용할 때 사용.
- 이벤트(예: 마우스 호버)로 시작되며, 해당 속성만 변화.
애니메이션:
- 지속적으로 반복되거나 복잡한 동작을 정의할 때 사용.
- Keyframes를 통해 시간에 따라 요소의 상태가 변하도록 설정.
4. 실전 예시: 이미지에 애니메이션 효과 적용
이미지에 애니메이션을 적용해 자연스럽게 확대되거나 축소되는 효과를 줄 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 애니메이션 예시</title>
<style>
.image {
width: 300px;
height: 200px;
animation: scaleImage 3s ease-in-out infinite;
}
@keyframes scaleImage {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300x200" class="image" alt="샘플 이미지">
</body>
</html>설명:
- **transform: scale()**을 사용해 이미지를 확대했다가 원래 크기로 돌아가는 애니메이션을 정의했습니다.
- 3초 동안 반복되며, 자연스럽게 확대되는 효과가 발생합니다.
결론
CSS 트랜지션과 애니메이션은 웹 페이지에 생동감을 더해줄 수 있는 중요한 기법입니다. 트랜지션은 상태 변화를 부드럽게 만들어주고, 애니메이션은 복잡한 동작을 구현하는 데 사용됩니다. 두 기법을 잘 활용하면 사용자 경험을 향상시키고, 인터랙티브한 웹 페이지를 쉽게 만들 수 있습니다.
다음 포스팅에서는 **CSS 변환(Transform)**에 대해 알아보겠습니다. 다양한 요소를 회전하거나, 크기를 조정하는 방법을 소개할 예정이니 기대해 주세요!
반응형
'CSS' 카테고리의 다른 글
| CSS 호버(:hover) 효과: 버튼 변형과 색상 변화로 인터랙티브한 UI 만들기 (4) | 2024.10.07 |
|---|---|
| CSS 플렉스박스 심화: 복잡한 레이아웃을 손쉽게 만드는 방법 (1) | 2024.10.06 |
| CSS 배경과 그라디언트 : background (0) | 2024.10.06 |
| CSS 변환(Transform): 요소를 자유롭게 변형하는 방법 (0) | 2024.10.05 |
| CSS 기초: 레이아웃 시스템 이해하기 (0) | 2024.09.30 |
