initial commit

2 files changed, 183 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/effecttiming/easing/index.html b/files/zh-cn/web/api/effecttiming/easing/index.html
new file mode 100644
index 0000000000..0ee0bfea9f
--- /dev/null
+++ b/files/zh-cn/web/api/effecttiming/easing/index.html
@@ -0,0 +1,105 @@
+---
+title: EffectTiming.easing
+slug: Web/API/EffectTiming/easing
+translation_of: Web/API/EffectTiming/easing
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p>这个{{domxref("EffectTiming")}} 词的 <strong><code>easing</code></strong> 属性在 <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> 指定用于缩放时间以产生缓和效果的计时函数，<em>easing</em> 是动画随时间变化的速率。</p>
+
+<div class="note">
+<p>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} all accept an object of timing properties including <code>easing</code>. The value of easing corresponds directly to {{domxref("AnimationEffectTimingReadOnly.easing")}} in {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and {{domxref("KeyframeEffect")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>timingProperties</em> = {
+  easing: {{cssxref("single-transition-timing-function")}}
+}
+
+<em>timingProperties</em>.easing = {{cssxref("single-transition-timing-function")}}
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A string defining the timing function to use for easing transitions during the animation process. Accepts several pre-defined {{domxref("DOMString")}} values, a <code>steps()</code> timing function like <code>steps(5, end)</code>, or a custom <code>cubic-bezier</code> value like <code>cubic-bezier(0.42, 0, 0.58, 1)</code>. Defaults to <code>linear</code>. Available values include:</p>
+
+<dl>
+ <dt><code>linear</code></dt>
+ <dd>A constant rate of change, neither accelerating nor deccelerating. </dd>
+ <dt><code>cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code></dt>
+ <dd><img alt="A diagram showing the points of a cubic bezier timing function." src="https://www.w3.org/TR/css-timing-1/cubic-bezier-timing-curve.svg" style="height: 150px; width: 400px;"><br>
+ Specifies <a href="https://w3c.github.io/web-animations/#cubic-bzier-timing-function">a cubic Bézier timing function</a>. The four numbers specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid.</dd>
+ <dt><code>ease</code></dt>
+ <dd>A decelerated rate of change, going from fast to slow. Equivalent to <code>cubic-bezier(0.25, 0.1, 0.25, 1)</code>.</dd>
+ <dt><code>ease-in</code></dt>
+ <dd>An accelerated rate of change, going from slow to fast. Equivalent to <code>cubic-bezier(0.42, 0, 1, 1)</code>.</dd>
+ <dt><code>ease-out</code></dt>
+ <dd>变化速率变慢了，从快到慢， 等价于<code>cubic-bezier(0, 0, 0.58, 1)</code>.</dd>
+ <dt><code>ease-in-out</code></dt>
+ <dd>This rate of change speeds up in the middle. Equivalent to <code>cubic-bezier(0.42, 0, 0.58, 1)</code>.</dd>
+ <dt class="hidden"><code>frames(&lt;integer&gt;)</code></dt>
+ <dd class="hidden">Specifies a <a href="https://www.w3.org/TR/css-timing-1/#frames-timing-functions">frames timing function</a>, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. See GitHub for a <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html">simple example</a> that illustrates the difference between <code>steps()</code> and <code>frames()</code>.</dd>
+ <dt><code>steps(&lt;integer&gt;[, [ start | end ] ]?)</code></dt>
+ <dd><img alt="A diagram of the various steps timing functions." src="https://www.w3.org/TR/css-timing-1/step-timing-func-examples.svg" style="height: 238px; width: 500px;"><br>
+ Specifies <a href="https://w3c.github.io/web-animations/#step-timing-function">a step timing function</a>, which breaks the animation down into a number of equal time intervals. The browser flips to a different static frame when each interval is reached, rather than animating smoothly. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value end.</dd>
+ <dt><code>step-start</code></dt>
+ <dd>Equivalent to <code>steps(1, start)</code></dd>
+ <dt><code>step-end</code></dt>
+ <dd>Equivalent to <code>steps(1, end)</code>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the <a href="http://codepen.io/rachelnabors/pen/PNGGaV?editors=0010">Red Queen's Race</a> example, we animate Alice and the Red Queen by passing an easing <code>of steps(7, end)</code> to <code>animate()</code>:</p>
+
+<pre class="brush: js notranslate">// Define the key frames
+var spriteFrames = [
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-100%)' }
+];
+
+// Get the element that represents Alice and the Red Queen
+var redQueen_alice_sprite = document.getElementById('red-queen_and_alice_sprite');
+
+// Animate Alice and the Red Queen using steps()
+var redQueen_alice = redQueen_alice_sprite.animate(
+spriteFrames, {
+  easing: 'steps(7, end)',
+  direction: "reverse",
+  duration: 600,
+  playbackRate: 1,
+  iterations: Infinity
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#time-transformations', 'easing' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EffectTiming.easing", 2)}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}, and {{domxref("AnimationEffect.updateTiming()")}} all accept an object of timing properties including this one.</li>
+ <li>The value of this property corresponds to the one in {{domxref("EffectTiming")}} (which is returned from {{domxref("AnimationEffect.getTiming()")}} and {{domxref("AnimationEffect.getComputedTiming()")}}).</li>
+ <li>CSS's <code><a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a></code> and <code><a href="/en-US/docs/Web/CSS/transition-timing-function">transition-timing-function</a></code>.</li>
+</ul>
diff --git a/files/zh-cn/web/api/effecttiming/index.html b/files/zh-cn/web/api/effecttiming/index.html
new file mode 100644
index 0000000000..f0b2b7c289
--- /dev/null
+++ b/files/zh-cn/web/api/effecttiming/index.html
@@ -0,0 +1,78 @@
+---
+title: EffectTiming
+slug: Web/API/EffectTiming
+tags:
+  - API
+  - Animation
+  - Dictionary
+  - EffectTiming
+  - Experimental
+  - Interface
+  - KeyframeEffect
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Animations
+  - animate
+  - web animations api
+translation_of: Web/API/EffectTiming
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p>The <strong><code>EffectTiming</code></strong> dictionary, part of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>, is used by {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} to describe timing properties for animation effects. These properties are all optional, although without setting a <code>duration</code> the animation will not play.</p>
+
+<p>Simply put, these properties describe how the {{Glossary("user agent")}} should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("EffectTiming.delay", "delay")}} {{optional_inline}}</dt>
+ <dd>The number of milliseconds to delay the start of the animation. Defaults to 0.</dd>
+ <dt>{{domxref("EffectTiming.direction", "direction")}} {{optional_inline}}</dt>
+ <dd>Whether the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
+ <dt>{{domxref("EffectTiming.duration", "duration")}} {{optional_inline}}</dt>
+ <dd>The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.</dd>
+ <dt>{{domxref("EffectTiming.easing", "easing")}} {{optional_inline}}</dt>
+ <dd>The rate of the animation's change over time. Accepts the pre-defined values <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code>, and <code>"ease-in-out"</code>, or a custom <code>"cubic-bezier"</code> value like <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. Defaults to <code>"linear"</code>.</dd>
+ <dt>{{domxref("EffectTiming.endDelay", "endDelay")}} {{optional_inline}}</dt>
+ <dd>The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0. </dd>
+ <dt>{{domxref("EffectTiming.fill", "fill")}} {{optional_inline}}</dt>
+ <dd>Dictates whether the animation's effects should be reflected by the element(s) prior to playing (<code>"backwards"</code>), retained after the animation has completed playing (<code>"forwards"</code>), or <code>both</code>. Defaults to <code>"none"</code>.</dd>
+ <dt>{{domxref("EffectTiming.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
+ <dd>Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.</dd>
+ <dt>{{domxref("EffectTiming.iterations", "iterations")}} {{optional_inline}}</dt>
+ <dd>The number of times the animation should repeat. Defaults to <code>1</code>, and can also take a value of {{jsxref("Infinity")}} to make it repeat for as long as the element exists.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-effecttiming-dictionaries', 'EffectTiming' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EffectTiming")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
+</ul>