blob: 83e46427df9bcb5ecc78f66b2dd19ab731100718 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: animation-duration
slug: Web/CSS/animation-duration
tags:
- CSS 애니메이션
translation_of: Web/CSS/animation-duration
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>
<p><strong><code>animation-duration</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.</p>
<pre class="brush:css no-line-numbers">/* Single animation */
animation-duration: 6s;
animation-duration: 120ms;
/* Multiple animations */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;
</pre>
<p>축약 속성 {{ cssxref("animation") }}를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p>
<p>{{cssinfo}}</p>
<h2 id="문법(Syntax)">문법(Syntax)</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code>{{cssxref("<time>")}}</code></dt>
<dd>애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.</dd>
</dl>
<div class="note">
<p><strong>Note:</strong> 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.</p>
</div>
<div class="note">
<p><strong>Note</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>를 참조하십시오.</p>
</div>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="예제(Examples)">예제(Examples)</h2>
<p><a href="/en/CSS/CSS_animations">CSS 애니메이션 예제</a>를 참조하십시오. </p>
<h2 id="Specifications" name="Specifications">명세(Specifications)</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성(Browser compatibility)</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>3.0{{property_prefix("-webkit")}}<br>
{{CompatChrome(43.0)}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
<td>10</td>
<td>12{{property_prefix("-o")}}<br>
12.10</td>
<td>4.0{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.0{{property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
{{ CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>4.2{{property_prefix("-webkit")}}</td>
<td>{{CompatChrome(43.0)}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 {{geckoRelease("49.0")}}이후 기본 설정은 true로 기본 설정됩니다.</p>
<h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>JavaScript {{domxref("AnimationEvent")}} API</li>
</ul>
|
