Properties

Properties

Editing
  • account_tree
  • bug_report

animation-delay

애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.

사용 가능한 값 타입

〈time〉

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

사용되는 단위

이 속성에서 아래의 모든 단위를 사용할 수 있는 것은 아니므로 주의한다.

  • ms

    밀리초(milliseconds)를 나타낸다.

  • s

    초를 나타낸다.

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

  • animation-delay

    애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.

  • animation-duration

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

  • transition-delay

    전이 효과의 동작을 지연시킨다.

  • transition-duration

    전이효과가 지속되는 시간을 설정한다.

구문

  • animation-delay 0s;CSS Animations Level 1

    기본 값으로 지연 시간이 없다.

  • animation-delay 2s;CSS Animations Level 1

    애니메이션 지연시간을 2초로 설정한다.

  • animation-delay 500ms;CSS Animations Level 1

    1초를 1/1000의 단위로 설정이 가능하며 '500ms'로 설정하는 경우 1/2초를 의미한다.

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

    자바스크립트 형식으로 애니메이션 지연 시간을 3초로 설정한다.

예제

애니메이션 지연시간을 2초로 지정하였으므로 요소와 마우스 포인터가 만난 후 2초가 지나면 애니메이션이 실행된다.

버전 명세

Modules
Module NameStatusSummary
CSS Animations Level 1초안 작업

Last review date: 2022-12-6

지원 웹브라우저