6.7.8 animation-direction 속성
animation-direction 속성은 애니메이션의 진행 방향을 지정합니다.
형식
animation-direction:<속성값>;
사용할 수 있는 속성값은 다음 표와 같습니다.
표 6-25 animation-direction 속성값
|
속성값 |
설명 |
|
normal |
애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서대로 진행합니다(to → from). |
|
reverse |
애니메이션의 진행 방향을 키 프레임에 정의된 시간 순서의 역으로 진행합니다(from → to). |
|
alternate |
애니메이션이 1회 이상 실행될 경우 홀수 번째는 normal로, 짝수 번째는 reverse로 진행합니다. |
|
alternate-reverse |
애니메이션이 1회 이상 실행될 경우 홀수 번째는 reverse로, 짝수 번째는 normal로 진행합니다. |
애니메이션은 키 프레임에 정의한 순서대로 진행됩니다. 그런데 키 프레임을 어떠한 이유로 건드리지 못할 때, 애니메이션의 진행 방향은 수정하고 싶다면 animation-direction 속성을 사용합니다. 예를 들어, 다음처럼 속성을 정의하면 애니메이션의 진행 방향이 from(100%)에서 to(0%), 즉 키 프레임의 역순이 됩니다.
animation-direction:reverse;
Note animation-timing-function 속성
이 속성은 애니메이션의 속도를 지정할 때 사용합니다. 작동 방식이 transition-timing-function 속성과 똑같아서 여기서는 자세한 설명을 생략합니다. https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function을 참고해 주세요.