1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Properties
  5. animation-duration

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

animation-duration

Baseline
Widely available
*

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 9월.

* Some parts of this feature may have varying levels of support.

Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

animation-duration CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.

css
/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;

/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

축약 속성 animation를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

초기값0s
적용대상all elements, ::before and ::after pseudo-elements
상속no
계산 값as specified
Animation typeNot animatable

문법(Syntax)

Values

<time>

애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.

참고 : 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.

참고 : animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 Setting multiple animation property values를 참조하십시오.

Formal syntax

animation-duration = 
  [ auto | <time [0s,∞]> ]#
이 구문은 CSS Animations Level 2에 따른 최신 표준을 반영합니다. 모든 브라우저가 모든 부분을 구현한 것은 아닙니다. 지원 정보는 브라우저 호환성을 참조하세요.

예제(Examples)

CSS 애니메이션 예제를 참조하십시오.

명세

Specification
CSS Animations Level 2
# animation-duration

브라우저 호환성(Browser compatibility)

같이 보기(See also)

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content