animation-direction 속성으로 교대 주기 애니메이션 구현하기
CSS에서 애니메이션이 한 사이클을 마친 뒤 반대 방향으로 다시 재생되도록 하려면 animation-direction 속성에 alternate 값을 지정하면 됩니다. 이렇게 설정하면 정방향 → 역방향 → 정방향 순서로 애니메이션이 자연스럽게 번갈아 실행되어, 되돌아가는 듯한 부드러운 효과를 연출할 수 있습니다.
animation-direction의 주요 값
- normal – 기본값으로, 모든 사이클이 정방향으로만 재생됩니다.
- reverse – 모든 사이클이 역방향으로 재생됩니다.
- alternate – 홀수 번째 사이클은 정방향, 짝수 번째 사이클은 역방향으로 교대로 재생됩니다.
- alternate-reverse – 홀수 번째 사이클은 역방향, 짝수 번째 사이클은 정방향으로 교대로 재생됩니다.
예제 코드
다음 예제는 노란색 div 요소가 초록색에서 파란색으로 배경색이 전환되는 애니메이션을 총 3회 교대로 반복 실행합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: 3;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
동작 방식 설명
위 코드가 실행되면 다음과 같은 흐름으로 애니메이션이 진행됩니다.
- 1회차(정방향) – 배경색이 초록색(green)에서 파란색(blue)으로 2초 동안 서서히 변합니다.
- 2회차(역방향) – alternate 값에 의해 방향이 반전되어, 파란색에서 다시 초록색으로 돌아갑니다.
- 3회차(정방향) – 다시 초록색에서 파란색으로 전환되며 애니메이션이 종료됩니다.
여기서 animation-iteration-count: 3;은 애니메이션의 반복 횟수를 지정하는 부분입니다. 이 값을 제거하거나 infinite로 변경하면 무한히 교대 반복되는 애니메이션도 만들 수 있으니, 로딩 인디케이터나 깜빡임 효과 등 다양한 UI 연출에 활용해 보세요.