diff options
Diffstat (limited to 'files/ko/web/css/css_transitions')
| -rw-r--r-- | files/ko/web/css/css_transitions/index.html | 59 | ||||
| -rw-r--r-- | files/ko/web/css/css_transitions/using_css_transitions/index.html | 1058 |
2 files changed, 1117 insertions, 0 deletions
diff --git a/files/ko/web/css/css_transitions/index.html b/files/ko/web/css/css_transitions/index.html new file mode 100644 index 0000000000..e32bb60c42 --- /dev/null +++ b/files/ko/web/css/css_transitions/index.html @@ -0,0 +1,59 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - Overview + - Reference +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Transitions</strong>는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="안내서">안내서</h2> + +<dl> + <dt><a href="/ko/docs/Web/Guide/CSS/Using_CSS_transitions">CSS 트랜지션 사용하기</a></dt> + <dd>CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.</dd> +</dl> + +<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 definition.</td> + </tr> + </tbody> +</table> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Animations">CSS Animations</a>를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.</li> +</ul> diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..c81a169965 --- /dev/null +++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1058 @@ +--- +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]"><body> + <p>아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.</p> + <div class="box"></div> +</body></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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </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: <property> <duration> <timing-function> <delay>; +}</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"><div class="sidebar"> + <p><a class="menuButton" href="home">Home</a></p> + <p><a class="menuButton" href="about">About</a></p> + <p><a class="menuButton" href="contact">Contact Us</a></p> + <p><a class="menuButton" href="links">Links</a></p> +</div> +</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"><p>Click anywhere to move the ball</p> +<div id="foo"></div> +</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> |