Style animationDirection 속성

정의와 사용법

animationDirection 속성 설정이나 반환은 애니메이션이 중간 반복에서 반대로 재생되어야 하는지 여부를 정의합니다.

주석:애니메이션이 한 번만 재생되도록 설정되면 이 속성은 무효가 됩니다.

예제

<div> 요소의 animationDirection 속성 변경:

document.getElementById("myDIV").style.animationDirection = "reverse";

직접 시도해 보세요

문법

animationDirection 속성 반환:

object.style.animationDirection

animationDirection 속성 설정:

object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"

속성 값

값 설명
normal 기본 값. 애니메이션은 정상적으로 재생되어야 합니다.
reverse 애니메이션은 반대로 재생되어야 합니다.
alternate 애니메이션은 각 짝수 번째(1, 3, 5 등)에서 정상적으로 재생되고, 각 홀수 번째(2, 4, 6 등...)에서 반대로 재생됩니다。
alternate-reverse 애니메이션은 각 짝수 번째(1, 3, 5 등)에서 반대로 재생되고, 각 홀수 번째(2, 4, 6 등...)에서 정상적으로 재생됩니다。
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참고: inherit。

기술 세부 사항

기본 값: normal
반환 값: 문자열로 요소의 animation-direction 속성。
CSS 버전： CSS3

브라우저 지원

animationDirection CSS3 (1999) 기능입니다。

모든 브라우저는 완전히 지원합니다：

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 11

관련 페이지

CSS 참조 가이드:animation-direction 속성