CSS의 animation-direction 속성을 사용하면 애니메이션을 정방향으로 재생할지, 역방향으로 재생할지, 아니면 사이클마다 방향을 번갈아 전환하며 재생할지 지정할 수 있습니다.
animation-direction 속성이란?
animation-direction은 CSS 애니메이션이 @keyframes에서 정의된 순서대로 진행될지, 반대 순서로 진행될지를 결정하는 속성입니다. 이 속성을 활용하면 별도의 keyframes를 추가로 작성하지 않고도 하나의 애니메이션으로 다양한 연출 효과를 만들 수 있습니다.
주요 속성값
- normal – 기본값입니다. 애니메이션이 from에서 to 방향, 즉 정방향으로 재생됩니다.
- reverse – 애니메이션이 to에서 from 방향, 즉 역방향으로 재생됩니다.
- alternate – 홀수 번째 사이클에서는 정방향으로, 짝수 번째 사이클에서는 역방향으로 번갈아 재생됩니다.
- alternate-reverse – 홀수 번째 사이클에서는 역방향으로, 짝수 번째 사이클에서는 정방향으로 번갈아 재생됩니다.
사용 예제
다음 예제는 animation-direction 속성에 reverse 값을 적용하여 애니메이션을 역방향으로 재생하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
background-color: yellow;
animation-name: myanim;
animation-duration: 2s;
animation-direction: reverse;
}
@keyframes myanim {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
코드 설명
위 예제에서는 150×200px 크기의 div 요소에 2초 길이의 myanim 애니메이션을 적용했습니다. 원래 keyframes 정의대로라면 배경색이 초록색(green)에서 파란색(blue)으로 변해야 하지만, animation-direction: reverse;가 지정되어 있기 때문에 실제로는 파란색에서 초록색으로 거꾸로 진행됩니다.
활용 팁
애니메이션을 무한히 왕복 운동하게 만들고 싶다면 alternate 값과 함께 animation-iteration-count: infinite;를 조합하면 됩니다. 이렇게 하면 요소가 자연스럽게 앞뒤로 움직이는 효과를 구현할 수 있어 로딩 인디케이터나 배경 장식 애니메이션 등에 유용하게 활용됩니다.