CSS 애니메이션 방향 속성(animation-direction)이란?
animation-direction 속성은 애니메이션이 정방향으로 재생될지, 역방향으로 재생될지, 아니면 번갈아 가며(교대로) 반복 재생될지를 설정하는 데 사용됩니다.
이 속성을 활용하면 동일한 @keyframes 애니메이션이라도 재생 방향에 따라 전혀 다른 느낌의 동적 효과를 연출할 수 있습니다.
animation-direction 주요 속성값
- normal – 기본값으로, 애니메이션이 항상 정방향(순방향)으로 재생됩니다.
- reverse – 애니메이션이 역방향으로 재생되며, 모든 반복 주기가 순서대로 거꾸로 진행됩니다.
- alternate – 홀수 번째 사이클에서는 정방향, 짝수 번째 사이클에서는 역방향으로 번갈아 재생됩니다.
- alternate-reverse – 홀수 번째 사이클에서는 역방향, 짝수 번째 사이클에서는 정방향으로 번갈아 재생됩니다.
animation-direction 속성 구현 예제
다음 코드를 실행하여 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>
코드 설명
위 예제에서 div 요소는 150×200px 크기의 노란색 박스입니다. @keyframes myanim 규칙은 배경색이 초록색(green)에서 파란색(blue)으로 2초 동안 전환되도록 정의하고 있습니다.
그러나 animation-direction: reverse; 설정이 적용되었기 때문에 실제 화면에서는 애니메이션이 역방향으로 재생되어, 배경색이 파란색에서 초록색으로 변화하는 것을 확인할 수 있습니다.