initial commit

2 files changed, 494 insertions, 0 deletions

diff --git a/files/zh-tw/web/css/css_transitions/index.html b/files/zh-tw/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..30fb2738c2
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/index.html
@@ -0,0 +1,110 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.</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="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact.</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>
+
+<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</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>11.6 {{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">#</a></td>
+   <td>3.0 {{property_prefix("-webkit")}}<br>
+    6.1</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")}}</td>
+   <td>{{CompatUnknown}}</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">#</a></td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can trigger animations independently of value changes.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..ecbdf92487
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,384 @@
+---
+title: CSS 轉場
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+tags:
+  - CSS animation
+  - CSS transition
+  - CSS 轉場
+  - CSS 過渡
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<h3 id="sect1">   </h3>
+<div>
+ <p>原文 : <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">https://developer.mozilla.org/en/CSS/CSS_transitions</a></p>
+ <p> </p>
+ <div>
+  <p>{{ SeeCompatTable() }}</p>
+  <p>   CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。</p>
+  <div class="note">
+   <strong>注意：</strong> CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 <code>-moz-transition</code>, <code>-webkit-transition 及</code> <code>-o-transition 的程式。</code></div>
+  <h2 id="可供調整的_CSS_property_清單">可供調整的 CSS property 清單</h2>
+  <p>  CSS transitions 和 CSS animations 中可以用來修改的屬性在 <a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a> 可以看到。這裡頭同時包含了 SVG properties。</p>
+  <div class="note">
+   <strong>注意:</strong> 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。</div>
+  <h2 id="CSS_transition_properties">CSS transition properties</h2>
+  <p>  我們可以透過 {{ cssxref("transition") }} property 來控制 CSS transitions。這可有效避免使用過長的參數來控制你的 transitions，這樣亦減少了 debug 的難度。</p>
+  <p>  下列的 sub-properties 可以協助你控制轉場的性質：</p>
+  <dl>
+   <dt>
+    {{ cssxref("transition-property") }}</dt>
+   <dd>
+     定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。</dd>
+   <dt>
+    {{ cssxref("transition-duration") }}</dt>
+   <dd>
+    定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。</dd>
+   <dt>
+    {{ cssxref("transition-timing-function") }}</dt>
+   <dd>
+    設定轉場時所依據的貝茲曲線。</dd>
+   <dt>
+    {{ cssxref("transition-delay") }}</dt>
+   <dd>
+    定義多久之後開始發生轉場。</dd>
+  </dl>
+  <h2 id="使用漸變函式_(transition_timing_function)">使用漸變函式 (transition timing function)</h2>
+  <p>  漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表：</p>
+  <p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>
+  <p>  <a class="external" href="http://cssglue.com/cubic">CSS transition function manipulator</a> 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。</p>
+  <p>  除了自行定義之外，尚有幾個已經預先定義好的函式：</p>
+  <ul>
+   <li><strong>ease</strong>, 等同於 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li>
+   <li><strong>linear</strong>, 等同於 <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li>
+   <li><strong>ease-in</strong>, 等同於 <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li>
+   <li><strong>ease-out</strong>, 等同於 <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li>
+   <li><strong>ease-in-out</strong>, 等同於 <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
+  </ul>
+  <h3 id="一個_transition_timing_effect_範例">一個 transition timing effect 範例</h3>
+  <p>  我們在這直接用範例來說明。</p>
+  <p>  在看程式碼之前，或許你會想先看看實際的執行效果。請挑個有支援 transitions 的瀏覽器，然後<a href="/samples/cssref/transitions/sample3" title="samples/cssref/transitions/sample3">看看這個</a> (而<a href="/samples/cssref/transitions/sample3/transitions.css" title="samples/cssref/transitions/sample3/transitions.css">這裡</a>有這個範例的相關 CSS 程式碼)。</p>
+  <p>  首先，先以 HTML 創建這個範例的主要外殼：</p>
+  <pre class="brush: html">&lt;ul&gt;
+  &lt;li id="long1"&gt;Long, gradual transition...&lt;/li&gt;
+  &lt;li id="fast1"&gt;Very fast transition...&lt;/li&gt;
+  &lt;li id="delay1"&gt;Long transition with a 2-second delay...&lt;/li&gt;
+  &lt;li id="easeout"&gt;Using ease-out timing...&lt;/li&gt;
+  &lt;li id="linear"&gt;Using linear timing...&lt;/li&gt;
+  &lt;li id="cubic1"&gt;Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>  如你所見，每個 item 都有自己的 ID。剩下的部份交由 CSS 來處理。</p>
+  <h4 id="使用延遲機制">使用延遲機制</h4>
+  <p>  這個範例會在使用者滑鼠移過 element 後兩秒開始四秒的字體大小變化：</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>
+  <h4 id="使用線性轉場函式_(linear_transition_timing_function)">使用線性轉場函式 (linear transition timing function)</h4>
+  <p>  如果你希望動畫的變動是以線性的速率，那你可以寫成：</p>
+  <pre class="brush: css">transition-timing-function: linear;
+</pre>
+  <p>  此外，還有許多不同的 timing functions 供你選擇，請見 {{ cssxref("transition-timing-function") }}。</p>
+  <h4 id="用貝茲曲線定義_timing_function">用貝茲曲線定義 timing function</h4>
+  <p>  你可以定義自己想要的 timing function，這要用貝茲曲線 (cubic bezier curve) 的形式定義之：</p>
+  <pre class="brush: css">  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+</pre>
+  <p>  上例中我們定義了一個以 (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) 和 (1.0, 1.0) 描述的貝茲曲線。</p>
+  <h2 id="偵測_transition_的完成">偵測 transition 的完成</h2>
+  <p>  在設計上，當 transition 完成時會觸發一個 event。在 Firefox 中，他是 <code>transitionend ; 在</code> Opera 中，他是 <code>oTransitionEnd ; 而在</code> WebKit 中，他是  <code>webkitTransitionEnd。請注意相容性的問題(參閱本頁最下方)。</code></p>
+  <p>  <code>transitionend</code> event 提供了兩個 properties：</p>
+  <dl>
+   <dt>
+    <code>propertyName</code></dt>
+   <dd>
+    這指出哪個 CSS property 的 transition 已經完成。</dd>
+   <dt>
+    <code>elapsedTime</code></dt>
+   <dd>
+    指出 transition 花費了幾秒。注意，他不受 {{ cssxref("transition-delay") }} 影響。</dd>
+  </dl>
+  <p>  在平常使用上，你可以使用 {{ domxref("element.addEventListener()") }} method 來監控：</p>
+  <pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+  <div class="note">
+   <strong>注意:</strong> "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。</div>
+  <h2 id="當_property_value_list_之間並不等長時_...">當 property value list 之間並不等長時 ... ?</h2>
+  <p>  如果某個 property 的 list 長度比其他短時，他將會被重複，直到等長。例如：</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>  可以預期地，倘若列出的 value 過多，他會被切斷。例如：</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="使用_transitions_來強調選單中的選項">使用 transitions 來強調選單中的選項</h2>
+  <p>  一個使用 CSS 的好時機是用來強調目前使用者滑鼠經過的選單位置。使用 transitions 可以使效果變得更吸引人。</p>
+  <p>  在看實際的程式碼之前，你可以先看<a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">實際的範例</a> (當然你的瀏覽器要能支援 transitions)。相關的 CSS 程式在<a href="/samples/cssref/transitions/sample2/transitions.css" title="samples/cssref/transitions/sample2/transitions.css">這裡</a>。 </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>  接著用 CSS 來產生特效：</p>
+  <pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  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;
+  -moz-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;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+</pre>
+  <p>  這些 CSS 程式使滑鼠滑過時 (在該 element 的 {{ cssxref(":hover") }} state) 造成背景及文字顏色的改變。</p>
+  <h2 id="使用_transitions_來使_JavaScript_運作的更順暢">使用 transitions 來使 JavaScript 運作的更順暢</h2>
+  <p>  Transition 是一種很好的工具，他可以幫助你的 JavaScript 執行結果看起來的更為順暢。舉例來說：</p>
+  <pre><span class="xml-punctuation">&lt;</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Click anywhere to move the ball</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span>
+<span class="xml-punctuation">&lt;</span><span class="xml-tagname">div </span><span class="xml-attname">id</span><span class="xml-punctuation">=</span><span class="xml-attribute">"foo"</span><span class="xml-punctuation">&gt;</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">div</span><span class="xml-punctuation">&gt;</span>
+</pre>
+  <p>  當你使用 JavaScript 可以將 ball 移動到特定位置：</p>
+  <pre><span class="js-keyword">var </span><span class="js-variable">f </span><span class="js-operator">= </span><span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">getElementById</span><span class="js-punctuation">(</span><span class="js-string">'foo'</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
+<span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">addEventListener</span><span class="js-punctuation">(</span><span class="js-string">'click'</span><span class="js-punctuation">, </span><span class="js-keyword">function</span><span class="js-punctuation">(</span><span class="js-variabledef">ev</span><span class="js-punctuation">)</span><span class="js-punctuation">{</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">left </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientX</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">top </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientY</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="js-punctuation">}</span><span class="js-punctuation">,</span><span class="js-atom">false</span><span class="js-punctuation">)</span><span class="js-punctuation">;    </span>
+</pre>
+  <p>  藉由 CSS，你可以使執行結果更為流暢。我們加入了：</p>
+  <pre><span class="css-selector">p</span><span class="css-punctuation">{
+  </span><span class="css-identifier">padding-left</span><span class="css-punctuation">:</span><span class="css-unit">60px</span><span class="css-punctuation">;
+</span><span class="css-punctuation">}</span>
+<span class="css-selector">#foo</span><span class="css-punctuation">{</span>
+<span class="css-identifier">  border-radius</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  width</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  height</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  background</span><span class="css-punctuation">:</span><span class="css-colorcode">#c00</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  position</span><span class="css-punctuation">:</span><span class="css-value">absolute</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  top</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  left</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  -moz-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">; </span>
+<span class="css-identifier">  -webkit-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -ms-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -o-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-punctuation">}</span>
+</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="使用_transition_events_來替_object_製作動畫">使用 transition events 來替 object 製作動畫</h2>
+  <p>  這裡讓我們看個例子，一個內含文字的方塊左右來回移動，並且會在兩種顏色之間做轉變：</p>
+  <p> </p>
+  <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv">
+    </video>
+  <p>  在我們仔細研究程式碼之前可以先看<a href="/samples/cssref/transitions/sample1" title="samples/cssref/transitions/sample1">範例</a>。同樣地，可以到<a href="/samples/cssref/transitions/sample1/transitions.css" title="samples/cssref/transitions/sample1/transitions.css">這</a>看其 CSS 的寫法。</p>
+  <h3 id="HTML_程式碼">HTML 程式碼</h3>
+  <p>  搭配上面範例的 HTML 程式碼並不複雜：</p>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
+    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
+    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="runDemo()"&gt;
+    &lt;div class="slideRight"&gt;This is a box!&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>  這裡唯一要注意的地方是我們用 slideRight 來修飾 "This is a box!"。此外，在這個文件被讀取時，就會觸發 <code>runDemo()</code> function。</p>
+  <h3 id="CSS_程式碼">CSS 程式碼</h3>
+  <p>  我們使用 slideRight 和 slideLeft 這兩個 CSS class 來建構動畫 (請參閱 <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> )。這裡列出部分：</p>
+  <pre class="brush: css">.slideRight {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+</pre>
+  <p>  我們再這明確定義了 position property。這是一件必要的事情，不然動畫將不知道如何開始。</p>
+  <p>  {{ cssxref("transition-property") }} property 指出哪些 CSS properties 會被包含在動畫效果中。在這個例子中是 {{ cssxref("background-color") }}, {{ cssxref("color") }} 以及 {{ cssxref("left") }}。 {{ cssxref("transition-duration") }} property 則說明了整個動畫將歷時 5 秒。</p>
+  <p>  為了相容於 WebKit 及 Opera，當中還定了一些以 "-webkit-" 和 "-o-" 起始的 property。</p>
+  <p>  總的來說， "slideRight" class 定義了最左端點時的狀態 (準備向右滑動)。所以你可以看到 {{ cssxref("left") }} property 是 0% 。</p>
+  <p>  下面我們定義了 "slideLeft" class，他表示最右端時的狀態 (準備向左滑動)：</p>
+  <pre class="brush: css">.slideLeft {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}</pre>
+  <h3 id="JavaScript_程式碼">JavaScript 程式碼</h3>
+  <p>  在定義了左右兩端點的狀態後，現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。</p>
+  <div class="note">
+   <strong>注意：</strong> 在這裡，倘若 <a class="external" href="/zh_tw/CSS_動畫" title="zh_tw/CSS_動畫">CSS animations</a> 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。</div>
+  <p>  首先定義 <code>runDemo()</code> function，他將在文件被讀取後立刻執行：</p>
+  <pre class="brush: js">function runDemo() {
+  var el = updateTransition();
+
+  // Set up an event handler to reverse the direction
+  // when the transition finishes.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+</pre>
+  <p>  他呼叫了 <code>updateTransition()</code> function (這待會會定義)，並且他捕捉了 "transitionend" event，這使我們能夠知道動畫結束了。</p>
+  <p><code><font face="'Lucida Grande', 'Lucida Sans Unicode', Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 13px;">  </span></font>updateTransition()</code> function 內容如下：</p>
+  <pre class="brush: js">function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+</pre>
+  <p>  這裡的機制很簡單，我們找到 "slideLeft" 而後將他改變成 "slideRight"，接著動畫便結束。倘若此時並沒有 "slideLeft"，就表示已在右端點，於是執行反向動作。</p>
+  <h2 id="瀏覽器的支援情形">瀏覽器的支援情形</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 (WebKit)</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>1.0</td>
+      <td>{{ CompatGeckoDesktop("2") }}</td>
+      <td>10</td>
+      <td>10.5</td>
+      <td>3.2</td>
+     </tr>
+     <tr>
+      <td>Property</td>
+      <td><code>-webkit-transition</code></td>
+      <td><code>-moz-transition</code></td>
+      <td><code>-ms-transition</code></td>
+      <td><code>-o-transition</code></td>
+      <td><code>-webkit-transition</code></td>
+     </tr>
+     <tr>
+      <td>Transition ended event</td>
+      <td><code>webkitTransitionEnd</code></td>
+      <td><code>transitionend</code></td>
+      <td><code>MSTransitionEnd</code></td>
+      <td><code>oTransitionEnd</code></td>
+      <td><code>webkitTransitionEnd</code></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 Phone</th>
+      <th>Opera Mobile</th>
+      <th>Safari Mobile</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>2.1</td>
+      <td>{{ CompatGeckoMobile("2") }}</td>
+      <td>{{ CompatUnknown() }}</td>
+      <td>10</td>
+      <td>3.2</td>
+     </tr>
+    </tbody>
+   </table>
+  </div>
+  <h2 id="更多資訊">更多資訊</h2>
+  <ul>
+   <li><a class="external" href="http://dev.w3.org/csswg/css3-transitions/">CSS Transitions</a></li>
+   <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">CSS Transitions Module Level 3</a></li>
+   <li><a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a></li>
+   <li>{{ cssxref("-moz-transition") }}</li>
+   <li>{{ cssxref("-moz-transition-property") }}</li>
+   <li>{{ cssxref("-moz-transition-duration") }}</li>
+   <li>{{ cssxref("-moz-transition-timing-function") }}</li>
+   <li>{{ cssxref("-moz-transition-delay") }}</li>
+  </ul>
+  <p>{{ HTML5ArticleTOC() }}</p>
+  <p>{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}</p>
+ </div>
+</div>
+<p> </p>