animation-duration

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

animation-duration 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
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

문법(Syntax)

Values

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

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

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

Formal syntax

<time>#

예제(Examples)

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

명세(Specifications)

Specification	Status	Comment
CSS Animations The definition of 'animation-duration' in that specification.	Working Draft	Initial definition.

브라우저 호환성(Browser compatibility)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	3.0-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)^[1]	10	12-o 12.10	4.0-webkit

Feature	Android	Chrome	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	2.0-webkit	?	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)^[1]	No support	No support	4.2-webkit	43.0

[1] Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46)이후 기본 설정은 true로 기본 설정됩니다.

같이 보기(See also)

Using CSS animations
JavaScript AnimationEvent API