8.1 animation-iteration-count 속성
CSS 애니메이션은 동적인 시각적 효과를 만들어서 사용자 인터페이스를 향상시켜줘. 이번에는 애니메이션 반복을 제어하는 두 가지 핵심 속성, animation-iteration-count와 animation-direction를 살펴볼게.
animation-iteration-count 속성은 애니메이션이 몇 번 재생될지를 결정해. 이 속성을 사용하면 애니메이션이 한 번, 여러 번 또는 무한대로 재생될지를 제어할 수 있어.
문법:
element {
animation-iteration-count: number | infinite;
}
여기서:
number: 애니메이션의 재생 횟수 (예: 1, 2, 3, 등등)infinite: 애니메이션이 무한대로 재생됨
예시:
HTML
<div class="box"></div>
CSS
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
코드 설명:
@keyframes bounce: 요소를 위로 올렸다가 원래 위치로 되돌리는 애니메이션을 정의함animation-iteration-count: infinite: 애니메이션이 무한대로 재생되도록 설정함
8.2 animation-direction 속성
animation-direction 속성은 애니메이션의 재생 방향을 결정해. 애니메이션이 정방향으로 재생될지, 역방향으로 재생될지, 아니면 두 방향을 번갈아 가며 재생할지를 지정할 수 있어.
문법:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
여기서:
normal: 애니메이션이 정방향으로 재생됨 (기본값)reverse: 애니메이션이 역방향으로 재생됨alternate: 애니메이션이 정방향과 역방향을 번갈아 가며 재생됨alternate-reverse: 애니메이션이 역방향으로 시작한 뒤, 정방향과 역방향을 번갈아 가며 재생됨
예시
정방향과 역방향 재생:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
코드 설명:
.box1: 애니메이션이 정방향으로 재생됨.box2: 애니메이션이 역방향으로 재생됨
방향 번갈기:
HTML
<div class="box1"></div>
<div class="box2"></div>
CSS
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
코드 설명:
.box1: 애니메이션이 정방향과 역방향을 번갈아 가며 재생됨.box2: 애니메이션이 역방향으로 시작해서 정방향과 역방향을 번갈아 가며 재생됨
8.3 두 속성의 사용 예시
흔들리는 요소
- 이 예시는 좌우로 흔들리는 요소를 보여줘:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>흔들리는 요소</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
코드 설명:
@keyframes swing: 요소를 회전시키는 애니메이션을 정의함.box:swing애니메이션이 적용된 요소, 1초의 지속 시간과 무한 반복 재생, 역방향으로 시작함
GO TO FULL VERSION