Properties

Properties

Editing
  • account_tree
  • bug_report

animation

애니메이션의 여러 속성을 한번에 정의할 수 있도록 해주는 축약식 속성이다.

사용 가능한 값 타입

〈single-animation〉

애니메이션에 관련된 속성들에 대한 일괄 정의된 값을 나타낸다. 주의할 점은 <time> 타입의 값은 작성 순서에 따라 animation-durationanimation-delay 순으로 값이 할당된다.

  • <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
    CSS Animations Level 1

    각 속성을 생략하는 경우에는 기본값이 적용된다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈'animation-name'〉

    애니메이션이 정의되어 있는 키프레임의 이름을 지정한다.

    • <keyframes-name> | none
      CSS Animations Level 1
  • 〈easing-function〉

    애니메이션 중 1차원 값이 얼마나 빠르게 변화하는 지를 설명하는 수학 함수를 나타낸다. 이를 통해 움직임의 지속 시간에 대한 속도 변화를 줄 수가 있다.

    • linear | <cubic-bezier-easing-function> | <step-easing-function>
      CSS Animations Level 1
  • 〈single-animation-direction〉

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

    • normal | reverse | alternate | alternate-reverse
      CSS Animations Level 1
  • 〈single-animation-fill-mode〉

    애니메이션이 실행 중인 시간 외에 적용되는 값을 정의한다. 즉 애니메이션이 시작되기 전과 끝난 후의 적용되는 값에 대한 정의를 나타낸다.

    • none | forwards | backwards | both
      CSS Animations Level 1
  • 〈single-animation-iteration-count〉

    애니메이션 주기가 재생되는 횟수를 지정한다. 기본 값은 1이며 키프레임 처음부터 끝까지 한번 실행됨을 나타낸다.

    • infinite | <number>
      CSS Animations Level 1
  • 〈single-animation-play-state〉

     애니메이션의 실행 또는 일시중지를 정의한다.

    • running | paused
      CSS Animations Level 1
  • 〈time〉

    초(seconds) 또는 밀리초(milliseconds)로 시간을 나타낸다.

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

  • 〈'animation-name'〉<'animation-name'>CSS Animations Level 1

    @keyframes 으로 정의한 애니메이션 이름을 설정한다. 기본 값은 none이다.

  • 〈time〉<'animation-duration'>CSS Animations Level 1

    애니메이션 동작 시간을 초(s) 또는 밀리세컨드(ms)단위로 설정한다. 기본 값은 0이다.

  • 〈easing-function〉<'animation-timing-function'>CSS Animations Level 1

    애니메이션 동작 시간 동안 속도 변화에 대한 값을 설정한다. 기본 값은 ease 이다.

  • 〈time〉<'animation-delay'>CSS Animations Level 1

    애니메이션을 일정 시간 지연후 동작을 하고자 하는 경우에 지연 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다. 기본 값은 0이다.

  • 〈single-animation-iteration-count〉<'animation-iteration-count'>CSS Animations Level 1

    애니메이션을 얼마나 반복할 지를 설정한다. 기본 값은 1이다.

  • 〈single-animation-direction〉<'animation-direction'>CSS Animations Level 1

    키프레임에 정의한 애니메이션 동작의 방향을 설정한다. 기본 값은 normal이며 keyframes에 정의한 순서대로 동작이 발생한다.

  • 〈single-animation-fill-mode〉<'animation-fill-mode'>CSS Animations Level 1

    키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.

  • 〈single-animation-play-state〉<'animation-play-state'>CSS Animations Level 1

    애니메이션의 동작을 일시 정지와 실행으로 제어한다. 기본 값은 running 이다.

예제

축약형 속성인 animation 속성으로 간단한 애니메이션 동작을 보여주고 있다.

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저