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 September 2015.

* 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 = 
<time [0s,∞]>#

예제(Examples)

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

명세

Specification
CSS Animations Level 1
# animation-duration

브라우저 호환성(Browser compatibility)

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-duration
auto value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기(See also)