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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
---
title: animation-direction
slug: Web/CSS/animation-direction
tags:
- CSS 속성
- CSS 애니메이션
translation_of: Web/CSS/animation-direction
---
<div>{{CSSRef}} {{SeeCompatTable}}</div>
<p><strong><code>animation-direction</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.</p>
<pre class="brush: css no-line-numbers">/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
</pre>
<p>축약 속성 {{cssxref ( "animation")}}을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p>
<p>{{cssinfo}}</p>
<h2 id="문법(Syntax)">문법(Syntax)</h2>
<h3 id="값(Values)">값(Values)</h3>
<dl>
<dt><code>normal</code></dt>
<dd> 애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.</dd>
<dt><code>reverse</code></dt>
<dd>애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.</dd>
<dt><code>alternate</code></dt>
<dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd>
<dt><code>alternate-reverse</code></dt>
<dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd>
</dl>
<div class="note">
<p><strong>노트</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#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-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>를 보십시오.</p>
<h2 id="명세(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-direction', 'animation-direction')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2>
<div>{{CompatibilityTable}}</div>
<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>{{CompatVersionUnknown}}{{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.50</td>
<td>4.0{{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>19</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>10</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>19</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>10</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</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>{{CompatUnknown}}</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>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatChrome(43.0)}}</td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</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>
|
