Merge pull request #32 from fiji-flo/unslugging-zh-cn

Unslugging zh cn

1 files changed, 267 insertions, 0 deletions

diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html
new file mode 100644
index 0000000000..1e53f47c6d
--- /dev/null
+++ b/files/zh-cn/conflicting/web/css/easing-function/index.html
@@ -0,0 +1,267 @@
+---
+title: <timing-function>
+slug: conflicting/Web/CSS/easing-function
+tags:
+  - CSS
+  - timing-function
+translation_of: Web/CSS/easing-function
+translation_of_original: Web/CSS/timing-function
+original_slug: Web/CSS/timing-function
+---
+<p>{{ CSSRef() }}</p>
+
+<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong>&lt;timing-function&gt;</strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p>
+
+<p>这是一个表示时间输出比率的函数，表示为{{cssxref("&lt;number&gt;")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p>
+
+<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p>
+
+<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p>
+
+<h2 class="cleared" id="定时函数">定时函数</h2>
+
+<div style="width: 100%;">
+<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p>
+
+<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td>
+    <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p>
+   </td>
+   <td>
+    <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p>
+
+    <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p>
+
+    <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p>
+
+    <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p>
+
+    <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h4 id="语法">语法</h4>
+
+<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code>
+</pre>
+
+<p>其中，</p>
+
+<dl>
+ <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是&lt;number&gt;类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt>
+ <dd style="margin-left: 40px;">Are {{cssxref("&lt;number&gt;")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd>
+</dl>
+
+<h4 id="示例">示例</h4>
+
+<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p>
+
+<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1)   </code>The canonical Bézier curve with four &lt;number&gt; in the [0,1] range.
+cubic-bezier(0, 0, 1, 1)           Using &lt;integer&gt; is valid as any &lt;integer&gt; is also a &lt;number&gt;.
+cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects.
+cubic-bezier(0.1, 4, 0.6, 2.45)    Values &gt; 1.0 for ordinates are also valid.</pre>
+
+<p>像这些贝塞尔曲线的定义是无效的：</p>
+
+<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios.
+cubic-bezier(-0.2, 0.6, -0.1, 0)   Abscissas must be in the [0, 1] range or the curve is not a function of time.
+cubic-bezier(0.3, 2.1)             The two points must be defined, there is no default value.
+cubic-bezier(1.1, 0, 4, 0)         Abscissas must be in the [0, 1] range or the curve is not a function of time.
+</pre>
+
+<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td>
+   <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;">
+    <table class="withoutBorder">
+     <tbody>
+      <tr>
+       <td></td>
+       <td rowspan="2">
+        <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td rowspan="2"></td>
+  </tr>
+  <tr style="text-align: center;">
+   <td style="white-space: nowrap;"><code>steps(2, start)</code></td>
+   <td><code>steps(4, end)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code>
+</pre>
+
+<p>where :</p>
+
+<dl>
+ <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt>
+ <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("&lt;integer&gt;")}} representing the amount of equidistant treads composing the stepping function.</dd>
+ <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt>
+ <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>:
+ <ul>
+  <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li>
+  <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Examples">Examples</h4>
+
+<p>These timing functions are valid :</p>
+
+<pre>steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
+steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
+</pre>
+
+<p>These timing function are invalid :</p>
+
+<pre>steps(2.0, end)        The first parameter must be an <a title="integer">&lt;integer&gt;</a> and cannot be a real value, even if it is equal to one.
+steps(-3, start)       The amount of steps must be non-negative.
+steps(0, end)          There must be at least one step.
+steps(2)               The second parameter is not optional.
+steps(start, 3)        Though of different types, the order of parameter is important.
+step(1, end)           Even if there is one step, the function name is steps, with the plural 's'
+steps(3 end)           The two parameters must be separated with a comma; one or several spaces is not enough.
+</pre>
+
+<h3 id="常用定时函数关键字">常用定时函数关键字</h3>
+
+<h4 id="linear"><code>linear</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td>
+   <td>
+    <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="ease"><code>ease</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td>
+   <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="ease-in"><code>ease-in</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td>
+   <td>
+    <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="ease-in-out"><code>ease-in-out</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td>
+   <td>
+    <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="ease-out"><code>ease-out</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td>
+   <td>
+    <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="step-start"><code>step-start</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="step-end"><code>step-end</code></h4>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr style="vertical-align: top;">
+   <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td>
+   <td>
+    <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '&lt;timing-function&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defined anonymously</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '&lt;timing-function&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Defined anonymously, says to see definition in the CSS Transitions Module</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("css.types.timing-function", 2)}}</p>
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li>
+ <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li>
+</ul>