Properties

Properties

Draft
  • account_tree
  • bug_report

animation-direction

애니메이션 키프레임의 실행 순서를 설정한다.

설정 가능한 속성 값

  • normal기본값키워드CSS3

    키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한다.

  • reverse키워드CSS3

    키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.

  • alternate키워드CSS3

    키프레임의 설정된 순서에 따라서 시작 키프레임에서 마지막 키프레임으로 애니메이션을 실행한 후 이어서 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션을 실행한다.

  • alternate-reverse키워드CSS3

    키프레임의 설정된 순서에 따라서 마지막 키프레임에서 시작 키프레임으로 애니메이션을 실행한 후 시작 키프레임에서 마지막 키프레임으로 역방향으로 애니메이션을 실행한다.

구문

  • animation-direction normal;기본값CSS3

    키프레임의 설정에 따라 처음 키프레임에서 마지막 키프레임으로 애니메이션이 실행된다.

  • animation-direction reverse;사용 예CSS3

    키프레임의 설정에 따라 마지막 키프레임에서 시작 키프레임으로 역방향으로 애니메이션이 실행된다.

  • object.style.animationDirection = "reverse";자바스크립트 형식CSS3

    자바스크립트 형식으로 애니메이션의 방향을 역순으로 처리한다.

지원 웹브라우저