1 files changed, 150 insertions, 0 deletions
diff --git a/files/ko/web/css/transition/index.html b/files/ko/web/css/transition/index.html
new file mode 100644
index 0000000000..039bedc362
--- /dev/null
+++ b/files/ko/web/css/transition/index.html
@@ -0,0 +1,150 @@
+---
+title: transition
+slug: Web/CSS/transition
+translation_of: Web/CSS/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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}<br>
+    26.0 <a href="http://googlechromereleases.blogspot.com/2013/03/stable-channel-update_26.html" title="Released on March 26, 2013">#</a></td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>10.1 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="Released on August 3, 2012">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}<br>
+    6.1</td>
+  </tr>
+  <tr>
+   <td>Gradients<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Gradients<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<p>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></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>