CSS 애니메이션 역방향 실행하기
CSS에서 애니메이션을 역방향으로 실행하려면 animation-direction 속성을 사용합니다. 이 속성에 reverse 값을 지정하면 @keyframes로 정의한 애니메이션이 마지막 프레임부터 첫 번째 프레임까지 거꾸로 재생됩니다.
기본 문법
animation-direction: reverse;
예제
아래 예제는 초록색에서 파란색으로 변하는 애니메이션을 정의한 뒤, 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>animation-direction 속성의 주요 값
animation-direction 속성은 reverse 외에도 다양한 값을 가질 수 있으며, 각 값은 다음과 같은 동작을 합니다.
- normal – 기본값으로, keyframes에 정의된 순서대로 정방향 재생
- reverse – 애니메이션을 역방향으로 재생
- alternate – 반복할 때마다 방향을 전환하며 재생 (정방향 → 역방향 → 정방향...)
- alternate-reverse – 역방향으로 시작하여 반복할 때마다 방향을 전환
이처럼 animation-direction 속성을 활용하면 별도의 keyframes를 추가로 작성하지 않고도 같은 애니메이션을 다양한 방향으로 손쉽게 제어할 수 있습니다.