애니메이션 키프레임의 실행 순서를 설정한다.
<single-animation-direction>#
<animation-name>
설정 수에 따라 하나 이상의 <single-animation-direction>
을 콤마로 구분해서 작성할 수 있다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.
normal | reverse | alternate | alternate-reverse
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.
키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.
animation-direction: alternate-reverse;
object.style.animationDirection = "reverse";
자바스크립트 형식으로 애니메이션의 방향을 역순으로 처리한다.
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Animations Level 1 | 초안 작업 | Last review date: 2022-12-6 |