Properties

Properties

Draft
  • account_tree
  • bug_report

animationCSS3

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

설정 가능한 속성 값

  • animation-name속성CSS3

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

  • animation-duration속성CSS3

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

  • animation-timing-function속성CSS3

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

  • animation-delay속성CSS3

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

  • animation-iteration-count속성CSS3

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

  • animation-direction속성CSS3

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

  • animation-fill-mode속성CSS3

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

  • animation-play-state속성CSS3

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

구문

  • animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;기본형식CSS3

    차례대로 @keyframes으로 정의한 애니메이션 이름, 지속 시간, 적용 방식, 지연 시간, 횟수, 방향, CSS 처리 방식, 애니메이션 동작 여부 속성을 지정한다. 각 속성을 생략하는 경우에는 기본값이 적용된다.

예제

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

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저