Properties

Properties

Editing
  • account_tree
  • bug_report

animation-duration

애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.

사용 가능한 값 타입

<'animation-duration'>

DEVDIC-Specified Data Types

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

  • CSS Animations Level 1
    <time [0s,∞]>#

    0s에서 무한대까지 시간을 지정할 수 있다.

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

포함된 타입

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

  • <time>

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

    Details

    사용되는 단위

    아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

    • ms

      1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

    • s

      초를 나타낸다.

    동일한 타입을 사용하는 관련 속성

    모든 속성을 표시하지 않을 수도 있다.

구문

  • animation-duration: 0s;
    CSS Animations Level 1

    애니메이션 실행 시간은 기본 값이 0이다. 애니메이션을 실행하기 위해서는 0보다 큰 값을 설정해야 한다.

  • animation-duration: 500ms;
    CSS Animations Level 1

    애니메이션 실행 시간을 500ms로 설정한다. 1000ms가 1초이므로 1/2초가 된다.

  • object.style.animationDuration = "1s";
    CSS Animations Level 1

    자바스크립트 형식이며 애니메이션 실행 시간을 1초로 설정한다.

예제

각 요소에게 animation-duration 값을 시간차를 두고 설정하여 애니메이션 처리하였다.

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저