Properties

Properties

Editing
  • account_tree
  • bug_report

animation-direction

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

사용 가능한 값 타입

<'animation-direction'>

DEVDIC-Specified Data Types

animation-direction 속성에 사용되는 타입이다.

  • CSS Animations Level 1
    <single-animation-direction>#

    <animation-name> 설정 수에 따라 하나 이상의 <single-animation-direction>을 콤마로 구분해서 작성할 수 있다.

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <single-animation-direction>

    애니메이션에 사용되는 키프레임의 진행 방향을 지정한다.

    • CSS Animations Level 1
      normal | reverse | alternate | alternate-reverse
    Details

    사용되는 키워드

    • alternate

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

    • alternate-reverse

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

    • normal

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

    • reverse

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

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

  • CSS Animations Level 1

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

구문

  • animation-direction: alternate-reverse;
    CSS Animations Level 1
  • object.style.animationDirection = "reverse";
    CSS Animations Level 1

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

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저