path: root/files/ko/web/css/css_transitions/using_css_transitions/index.html

---
title: CSS 트랜지션 사용하기
slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
tags:
  - Advanced
  - CSS
  - CSS Transitions
  - Guide
translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
---
<div>{{CSSRef}}</div>

<p><strong>CSS 트랜지션</strong>은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.</p>

<p>두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.</p>

<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>

<p>CSS transitions는 여러분이 <span style="line-height: 1.5;">(명시적으로 목록을 작성해서) </span><span style="line-height: 1.5;">어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) </span>트랜지션을<span style="line-height: 1.5;"> 얼마나 지속할지, 그리고 (</span><span style="line-height: 1.5;">예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 </span><span style="line-height: 1.5;">타이밍 함수를 정의해서) 어떻게 </span><span style="line-height: 1.5;">트랜지션을</span><span style="line-height: 1.5;"> 실행하는지 </span><span style="line-height: 1.5;">결정하게 합니다.</span></p>

<h2 id="애니메이션_가능한_CSS_속성은">애니메이션 가능한 CSS 속성은?</h2>

<p><span style="line-height: 1.5;">웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 </span>트랜지션<span style="line-height: 1.5;">을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, </span><a href="/en-US/docs/CSS/CSS_animated_properties" style="line-height: 1.5;" title="/en-US/docs/">애니메이션 가능한 속성의 집합</a><span style="line-height: 1.5;">은 유한한 집합으로 제한됩니다.</span></p>

<div class="note">노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다.</div>

<p class="note">또한, <span style="line-height: 1.5;">종종 auto 값은</span><span style="line-height: 1.5;"> 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 </span><span style="line-height: 1.5;">이는 브라우저와 버전에 따라 </span><span style="line-height: 1.5;">예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.</span></p>

<h3 id="다수의_애니메이션이_적용된_속성_예제">다수의 애니메이션이 적용된 속성 예제</h3>

<h4 id="HTML_내용">HTML 내용</h4>

<pre class="brush: html; highlight:[3]">&lt;body&gt;
    &lt;p&gt;아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.&lt;/p&gt;
    &lt;div class="box"&gt;&lt;/div&gt;
&lt;/body&gt;</pre>

<h4 id="CSS_내용">CSS 내용</h4>

<pre class="brush: css; highlight:[8,9]">.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

</pre>

<p>{{ EmbedLiveSample('%EB%8B%A4%EC%88%98%EC%9D%98_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4_%EC%A0%81%EC%9A%A9%EB%90%9C_%EC%86%8D%EC%84%B1_%EC%98%88%EC%A0%9C', '600', '300', '', 'Web/Guide/CSS/Using_CSS_transitions') }}</p>

<h2 id="트랜지션_정의에_사용한_CSS_속성">트랜지션 정의에 사용한 CSS 속성</h2>

<p>CSS 트랜지션은 단축(shorthand) 속성 {{cssxref("transition")}}을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.</p>

<p>여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:</p>

<p><strong>(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS <code>transition들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 </code>CSS <code><a href="/en-US/docs/CSS/animation" title="/en-US/docs/CSS/animation">animation</a> 속성을 살펴보세요.</code>)</strong></p>

<dl>
 <dt>{{ cssxref("transition-property") }}</dt>
 <dd>트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.</dd>
 <dt>{{ cssxref("transition-duration") }}</dt>
 <dd>트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
 <div>
 <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 0.5s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:0.5s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transformv color;
    transition-duration:0.5s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
 </div>

 <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 1s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform color;
    transition-duration:1s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:1s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
 </div>

 <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 2s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:2s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:2s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
 </div>

 <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-duration: 4s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration:4s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{ cssxref("transition-timing-function") }}</dt>
 <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. <em>Timing functions</em>는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 <a href="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-function">타이밍 함수</a>는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. <a href="http://easings.net/" title="http://easings.net/">Easing Functions Cheat Sheet</a>에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.
 <div class="cleared">
 <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: ease</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
 </div>

 <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: linear</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
 </div>

 <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: step-end</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
 </div>

 <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-timing-function: steps(4, end)</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
 </div>
 </div>
 </dd>
 <dt>{{ cssxref("transition-delay") }}</dt>
 <dd>속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
 <div>
 <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 0.5s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:0.5s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
 </div>

 <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 1s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:1s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:1s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
 </div>

 <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 2s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:2s;
    transition-timing-function: linear;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
 </div>

 <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
 <p><code>transition-delay: 4s</code></p>

 <div style="display: none;">
 <pre class="brush:html"> &lt;div class="parent"&gt;
  &lt;div class="box"&gt;Lorem&lt;/div&gt;
&lt;/div&gt;
  </pre>

 <pre class="brush:css;">.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-delay:4s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-delay:4s;
    transition-timing-function: ease-in-out;
}
</pre>

 <pre class="brush:js">function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
</pre>
 </div>

 <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
 </div>
 </div>
 </dd>
</dl>

<p>다음과 같이 단축 CSS 문법을 사용합니다.</p>

<pre class="brush:css;">div {
    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
}</pre>

<h2 id="트랜지션_완료_감지하기">트랜지션 완료 감지하기</h2>

<p>트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 <code>transitionend이며, </code>WebKit에서는 <code>webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. </code><code>transitionend 이벤트는 두 속성을 제공합니다.</code></p>

<dl>
 <dt><code>propertyName</code></dt>
 <dd>트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열</dd>
 <dt><code>elapsedTime</code></dt>
 <dd>이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수<span style="line-height: 1.5;">. 이 값은 {{ cssxref("transition-delay") }} 값에 영향을 받지 않습니다.</span></dd>
</dl>

<p>평소대로 {{ domxref("element.addEventListener()") }} 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.</p>

<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
</pre>

<div class="note"><strong>노트: </strong>트랜지션을 중단하면 <code style="font-size: 14px;">transitionend</code><span style="line-height: 1.5;"> 이벤트는 </span><span style="line-height: 1.5em;">발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.</span></div>

<h2 id="속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</h2>

<p>어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
</pre>

<p>위는 아래와 같이 처리합니다.</p>

<pre class="brush: css">div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}</pre>

<p>비슷하게, 어떤 속성의 값 목록이 {{ cssxref("transition-property") }} 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}</pre>

<p>위를 아래와 같이 해석합니다.</p>

<pre class="brush: css">div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}</pre>

<h2 id="간단한_예제">간단한 예제</h2>

<p>이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.</p>

<pre class="brush: css">#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
</pre>

<h2 id="메뉴_하이라이팅에_트랜지션_사용">메뉴 하이라이팅에 트랜지션 사용</h2>

<p>CSS의 흔한 사용은 <span style="line-height: 1.5;">사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 </span><span style="line-height: 1.5;">아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.</span></p>

<p>코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, <span style="line-height: 1.5;">(여러분의 브라우저가 트랜지션을 지원한다고 가정하면) </span><a class="external" href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">라이브 데모</a><span style="line-height: 1.5;">를 보고 싶을지도 모르겠습니다. 그것이 사용한 </span><a class="external" href="/samples/cssref/transitions/sample2/transitions.css" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">CSS를 직접</a> <span style="line-height: 1.5;">볼 수도 있습니다.</span></p>

<p>우선 HTML을 사용하여 메뉴를 설정합니다.</p>

<pre class="brush: html">&lt;div class="sidebar"&gt;
  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>그리고 우리 메뉴의 모습과 느낌(look and feel)을<span style="line-height: 1.5;"> CSS로 만듭니다. 관련 부분이 여기 있습니다.</span></p>

<pre class="brush: css">.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}
</pre>

<p>이 CSS는 그 요소가 <span style="line-height: 1.5;">{{ cssxref(":hover") }} 상태일 때 배경과</span><span style="line-height: 1.5;"> 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.</span></p>

<p>그 효과를 장황하게 설명하는 대신, <a class="external" href="/en/CSS/CSS_transitions#Browser_compatibility" style="line-height: 1.5;" title="en/CSS/CSS_transitions#Browser_compatibility">브라우저가 트랜지션을 지원한다면, </a><a href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="https://developer.mozilla.org/samples/cssref/transitions/sample2">라이브 샘플을 살펴보세요</a><span style="line-height: 1.5;">.</span></p>

<h2 id="트랜지션을_이용하여_JavaScript_기능_부드럽게_하기">트랜지션을 이용하여 JavaScript 기능 부드럽게 하기</h2>

<p>트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.</p>

<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
&lt;div id="foo"&gt;&lt;/div&gt;
</pre>

<p>JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.</p>

<pre class="brush: js">var f = document.getElementById('foo');
document.addEventListener('click', function(ev){
    f.style.left = (ev.clientX-25)+'px';
    f.style.top = (ev.clientY-25)+'px';
},false);
</pre>

<p>추가 노력 없이 <span style="line-height: 1.5;">CSS로 </span><span style="line-height: 1.5;">이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.</span></p>

<pre class="brush: css">p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all 1s;
}
</pre>

<p>여기에서 확인할 수 있습니다. <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a></p>

<h2 id="명세">명세</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', '', '') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="같이_보기">같이 보기</h2>

<div id="compat-mobile"> </div>

<ul>
 <li><span class="external"><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">CSS3 Dock Menu</a> using CSS transitions</span></li>
 <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li>
</ul>