blob: 1c8c0d60447e851d73a609e5525d4eb2daf3844f (
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
|
---
title: transition
slug: Web/CSS/transition
translation_of: Web/CSS/transition
browser-compat: css.properties.transition
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Summary">Summary</h2>
<p><strong><code>transition</code></strong> <a href="/en/CSS" title="CSS">CSS </a>속성은 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} 과 {{ cssxref("transition-delay") }}를 위한 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 <a href="/ko/docs/Web/CSS/Pseudo-classes">가상 클래스</a> 를 사용해 정의된 {{cssxref(":hover")}} 이나 {{cssxref(":active")}} 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
</pre>
<p>이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 {{cssxref("transition-duration")}} 로 적용되고, 두번째에 위치한다면 {{cssxref("transition-delay")}} 로 적용됩니다.</p>
<p>속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</a>를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.</p>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<p><a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS 트랜지션 사용하기</a> 에 다양한 CSS transition 예제가 있습니다.</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 Transitions', '#transition-shorthand-property', 'transition') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
<li>{{ domxref("TransitionEvent") }}</li>
</ul>
|
