2024. 10. 29. 23:58ㆍFront-End의 모든것/CSS
CSS 애니메이션은 자바스크립트 없이도 다양한 애니메이션을 가능하게 해주는 CSS 속성입니다. 이를 통해 간단한 효과부터 복잡한 애니메이션까지 구현할 수 있습니다. CSS 애니메이션의 핵심 요소는 @keyframes 규칙과 animation 속성입니다. 이 두 가지 요소가 함께 작동해 애니메이션의 움직임과 타이밍을 정의합니다.
1. CSS 애니메이션 기본 구성 요소
(1) @keyframes 규칙
@keyframes는 애니메이션의 단계별 상태를 정의하는 규칙입니다. 애니메이션 중간 상태를 정의하여 객체가 어떻게 움직이거나 변형되는지를 설정할 수 있습니다. 일반적으로 0%에서 100%까지의 상태를 정의해 시작과 끝 상태를 지정합니다.
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
위 예시에서는 객체가 0px에서 100px 오른쪽으로 이동하는 애니메이션이 정의되어 있습니다.
(2) animation 속성
animation 속성은 애니메이션의 지속 시간, 반복 횟수, 지연 시간 등을 정의합니다. @keyframes에서 정의된 이름을 호출해 애니메이션을 적용할 수 있습니다. 주요 하위 속성은 아래와 같습니다.
- animation-name: 적용할 애니메이션 이름을 설정.
- animation-duration: 애니메이션이 지속되는 시간을 설정.
- animation-timing-function: 애니메이션의 속도 변화를 정의. (예: ease, linear, ease-in, ease-out)
- animation-delay: 애니메이션이 시작되기 전 지연 시간 설정.
- animation-iteration-count: 애니메이션 반복 횟수를 설정.
2. 간단한 예시: 박스가 오른쪽으로 이동하는 애니메이션
아래 예시에서는 .box 요소가 오른쪽으로 이동하며 색이 변하는 애니메이션을 CSS만으로 구현합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* 요소 스타일 정의 */
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: moveRight 2s ease-in-out infinite alternate;
}
/* @keyframes로 애니메이션의 단계 설정 */
@keyframes moveRight {
0% {
transform: translateX(0);
background-color: blue;
}
100% {
transform: translateX(200px);
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명
- @keyframes moveRight: 박스가 오른쪽으로 200px 이동하며 색상이 파란색에서 초록색으로 변합니다.
- animation 속성: .box에 moveRight 애니메이션을 적용하고, 2초 동안 ease-in-out으로 부드럽게 이동하며, 애니메이션이 끝나면 반대로 돌아가는 infinite alternate를 설정했습니다.
3. 추가 애니메이션 속성
애니메이션에 좀 더 생동감을 추가하는 방법도 있습니다.
- animation-timing-function: 애니메이션이 시작하고 끝나는 방식의 가속도를 조정합니다.
- animation-fill-mode: 애니메이션의 시작 전이나 끝난 후의 상태를 정의합니다.
- animation-direction: 애니메이션 재생 방향을 설정합니다. 예를 들어 reverse로 설정하면 애니메이션이 역방향으로 재생됩니다.
4. 응용 예시: 크기와 투명도가 동시에 변화하는 애니메이션
다음은 요소가 커지면서 투명도가 변경되는 예시입니다.
<style>
.circle {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
opacity: 1;
animation: pulse 3s ease infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
}
</style>
<div class="circle"></div>
코드 설명
- pulse 애니메이션은 @keyframes에서 크기와 투명도 변화를 설정했습니다.
- **transform: scale(1.5);**로 요소 크기가 커지며 **opacity: 0.5**로 반투명해졌다가 원래 크기로 돌아갑니다.
CSS 애니메이션 장점
- 성능 최적화: CSS 애니메이션은 GPU에서 처리되므로, 특히 이동과 같은 간단한 애니메이션은 성능 저하가 적습니다.
- 반응형: CSS만으로 다양한 반응형 애니메이션을 적용할 수 있습니다.
CSS 애니메이션을 사용하면 JavaScript를 사용하지 않고도 부드럽고 시각적으로 매력적인 효과를 구현할 수 있어 인터랙티브한 디자인에 적합합니다.
'Front-End의 모든것 > CSS' 카테고리의 다른 글
| CSS 전처리기가 뭐죠? (1) | 2024.11.06 |
|---|---|
| CSS Property 공부하는법! (6) | 2024.10.25 |
| CSS 선택자(CSS Selectors)란? (0) | 2024.10.24 |
| CSS에 대해서 적용하기 전에! (0) | 2024.10.21 |
| CSS란? (2) | 2024.10.21 |